Reputation: 21

How to hide and show clickable content using HTML & CSS?

I understand that other people have asked questions similar to this, and I've already looked through their answers from other users and still am having difficulty understanding what to do...

Currently on one of the pages on my website, all of the collapsible content is automatically shown and will hide when you click on it. I would like the opposite, where all of the collapsible content is by default hidden, and you would have to click on the collapsible content to view the nested content inside of it to be shown.

Here is my CSS:

body{
      display: block;
    }
li{
    list-style-type: none;
    text-align:left;
    padding:3.5px;
    position:relative;
   }
.hhhh{
    text-align:left;
    }
h2{
    text-align:center;
   } 
h7{
    font-size:15px;
  }
span{
    text-align:left;
    }

And here is my HTML:

 <body>
     <h2>Industries Served</h2>
     <div id="ListContainer">
        <ul id="expList">
            <li>
                <h7 style="font-family:14px">
                <i class="fa fa-caret-right"></i> Aerospace & Aeronautics 
                </h7>
                <ul>
                    <li>
                        <div>
                        <div> 
                            <p class="alert"> ......... </p>
                        </div>
                        </div>
                    </li>
                </ul>
           </li>
           <li>
               <h7>
                   Agriculture & Food Science
               </h7>
               <ul>
                   <li>
                       <div>
                           <p> ......... </p>
                       </div>
                   </li> 
               </ul>
          </li>
          <li>
               <h7>
                    Alternative Energy & Clean Technology
               </h7>
               <ul>
                   <li>
                       <div>
                       <p> ......... </p>
                       </div>
                   </li>
               </ul>                       
           </li>
       </ul>
</div>

Here is my javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.markdown-block .sqs-block-content h7').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h7").click(function(){
        $(this).nextUntil("h7").slideToggle()
        $(this).find('.fa-caret-right').toggleClass('fa-rotate-90');
  });
});

Thank you!

Upvotes: 2

Answers (3)

AndrewL64

Reputation: 16311

You can do that by using a combination of css3 animation, opacity, transform and hover/click selectors.

Here is a codepen showing you a generic approach to doing this: http://codepen.io/abergin/pen/ihlDf where css3 keyframes is used. Here's one of the animation keyframes from the codepen:

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

Using the sibling and checked selectors, we can determine the styling of >sibling elements based on the checked state of the checkbox input element. One >use, as demonstrated here, is an entirely CSS and HTML accordion element. Media >queries are used to make the element responsive to different screen sizes.

Via - http://codepen.io/abergin/pen/ihlDf

Upvotes: 1