How to create a collapsible folder?

Question

Problem: I would like to create a folder that contains multiple folders. However, I am not able to get it just right.

I would like the sub folder to open up pushing the rest of the content down. Along with that, I am having a hard time aligning the text with the image.

The following is what I have done.

.dropdown {
    /*position: relative;
    */display: inline-block;
}

.dropdown2{
    /*position: relative;
    */display: inline-block;
}

.dropdown3 {
    /*position: relative;
    */display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown-content3 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 357px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown3:hover .dropdown-content3 {
    display: block;
}

.dropdown2:hover .dropdown-content2 {
    display: block;
}

<td style="font-size:12px; vertical-align:center">
     <div class="dropdown">
      <span style="color:#4284b0;">Controlled Substance Forms</span>
      <div class="dropdown-content">
       <div class="dropdown2">
        <div><img style="width:40px" src="images/Files-icon24.png" alt="Description of Quality Measures" class="float-left"/ >
        <span style="color:#4284b0; vertical-align:center">Controlled Substance Forms</span></div> 
         <div class="dropdown-content2"> 
          <p><a href="Downloads/PhyDownloads/Controlled Substances Prescribing Policy 02-07-2017.docx" target="_blank">Controlled Substances Prescribing Policy</a></p>
          <p><a href="Downloads/PhyDownloads/Controlled  Substance Treatment Agreement  02-07-2017.docx" target="_blank">Controlled  Substance Treatment Agreement</a></p>
         </div>
       </div>
       <p><a href="Downloads/PhyDownloads/HGH Treatment Agreement  02-07-2017.docx" target="_blank">HGH Treatment Agreement</a></p>
       <p><a href="Downloads/PhyDownloads/Appendix A. Opioid Risk Tool.pdf" target="_blank">Appendix A. Opioid Risk Tool</a></p>
       <p><a href="Downloads/PhyDownloads/Appendix B. PADT.pdf" target="_blank">Appendix B. PADT</a></p>
       <p><a href="Downloads/PhyDownloads/Testosterone Treatment Agreement  02-07-2017.docx" target="_blank">Testosterone Treatment Agreement</a></p>
      </div>
     </div>
    </td>

IE:

Chrome:

score 1 · Answer 1 · answered Feb 10 '17 at 23:57

1

In order to achieve what you want you must remove this line from the CSS of the dropdown-content2:

position: absolute;

As for

I am having a hard time aligning the text with the image.

I can't understand what result you want.

You can test what I said in this JSFiddle. You can take a screenshot and explain how you want the image displayed.

answered Feb 10 '17 at 23:57

Thanasis1101

1,614
4
17
28

@ Thanasis: I am not able to have what you are seeing on the JSFiddle on IE. I have attached a image on what I am seeing – Roberto Flores Feb 13 '17 at 16:35
Ok, I don't know what is the problem exactly. You can see here for help: http://stackoverflow.com/questions/531048/ie-css-alignment-issues – Thanasis1101 Feb 13 '17 at 20:19
@ Thanasis: Is there a way to make the folder responsive where the folder moves up or down depending on the cut off point? – Roberto Flores Feb 14 '17 at 00:02

How to create a collapsible folder?

1 Answers1