Collapsible Divs - HTML Primer
• First up is a bit of CSS, style information that manages the hover effect for the collapsible panels.
These <style> tags contain that CSS information. You will not need to edit these for any reason, leave
everything between “<style” and “</style>” as it is.
• Creating the collapsible panels themselves consists of two key parts, creating the clickable panel with
the title text and creating the relative content area- the space that expands and shows us our content.
The first div must include the class “section_#” and id “triggerdrop”. We can then close the first segment
and insert our title text. In this case, this is the title “Fresno County Clinicians”. We then close that div
with </div>
The second div is for our actual content area. This must use class “content_#” and id “contentdrop”
along with “display:none” tacked onto our style information. After the first segment of this div is in
place, we place all of our content before closing this div with </div>.
Important: Each individual panel will have a unique number assigned to it. In this case, our integer is 16,
which is tacked onto the classes section_ and content_. The number must match between those two
classes for each individual panel, but each panel must have their own separate number.
• Next will include our table, and the content within said table.
Every table will always start with <table> with style information included.
‘border=”0”’ gives us invisible borders within our table
cellpadding and cellspacing represent our padding and spacing, respectively. All of these tables have
these values set to 3
‘style=”100%;”’ allows the table to take up the full width of its container, the collapsing div.
The table will then break down into its body content with <tbody> All of the rest of the tables content
will sit within this tag. The end of the table’s content will punctuate with </tbody>
A table row is initiated with <tr>; TR for Table Row. Every row will start with this and end with </tr>
Each individual cell will begin with <td> and end with </td> all of the content for each individual cell will
begin and end with these tags. In our case, each staff member has their own cell, so one image nad one
name/title will sit in each set of <td></td>.
‘Style=”width:25%;”’ renders our cell as 25% of the total width of the table. With our tables spanning 4
cells wide, this ensures that our left to right spacing stays consistent.
‘valign=”top”’ alights our content with the top of our cell. This prevents issues from occurring when
some cells have more text than others, ensuring that our cells are evenly spaced top-to-bottom.
Content starts with a <p> tag; P as in “paragraph”. Content that sits within this tag will be adequately
space and anything after </p> will automatically break into the following vertical line. We place our
image within <p></p> and the proceeding text will automatically line break and sit underneath our
image.
“<img>” represents our image itself. ‘Src=(image url goes here)’ is where we’ll place the actual url of our
image, which we would grab from our image library. You can then see the width and height specs within
the style information, I have these almost universally set to 140x178 with very few exceptions for
images with conflicting aspect ratios. This ration seems to fit best for our provided images.
Our image ends with a </p> to close out our “paragraph”. After this tag is an automatic line break, and
we can place out name & title. The </br> in between the name and title represents our natural single
line break. Use these at will to create standard line breaks when content is not directly proceeding a
</p> tag.
• Every row will end with a </tr>. This means we need to close every set of four cells with this </tr>
Once we’ve reached the end of our table’s content, we close out the table body with </tbody> and we
close the table itself with </table>.
We can then close the entire collapsible panel by ending the div with </div> This is closing the entire
panel, the one that we identified before our table with class “content_#” and id “contentdrop”.
You can utilize these references to modify existing content, or add additional content.
Feel free to let us know if you have any questions, email me directly and [email protected] or
support at [email protected]