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

Question

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!

This answer should help you http://stackoverflow.com/questions/32395914/targeting-previous-div-in-javascript-or-css/#32396298 — NewToJS, Sep 04 '15 at 22:17
Check this: [question](http://stackoverflow.com/q/19260401/3281415) — SerCrAsH, Sep 04 '15 at 22:18
Custom styling using javascript is more difficult, and I felt like trying to see if there is a simpler way to do it. I'm not trying to shortcut around the problem though... If you know of a way to use javascript to solve the issue that would be fine too. — user5302330, Sep 04 '15 at 22:21
It is far easier to use JavaScript than CSS even if it is adding in another language. — Zak, Sep 04 '15 at 22:29

score 1 · Answer 1 · answered Sep 04 '15 at 22:19

1

You can use 'display' in CSS to show and hide content. More information on how to use here: http://www.w3schools.com/css/css_display_visibility.asp

Example:

h1.hidden {
    display: none;
}

answered Sep 04 '15 at 22:19

eSs

59
8

score 1 · Answer 2 · answered Sep 04 '15 at 22:27

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

I took a look at the link and it definitely does explain the end result I am looking for, but I'm fairly new to programming and what I am supposed to glean from it doesn't click (yet) automatically. Do you mind clarifying what kind of combination of the selectors mentioned in your answer could be used with respect to my code? Or at the very least give me a first step to send me in the right direction? Thank you for the resource! — user5302330, Sep 04 '15 at 22:49

score -1 · Answer 3 · answered Sep 04 '15 at 22:17

-1

You can use :focus technically.

Why not use jQuery though?

answered Sep 04 '15 at 22:17

RMH

821
2
15
38

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

3 Answers3