html - Javascript show and hide -

how make when click header hide or show list? , when visible header shows - , when not visible shows +. lot

 <div class="revealcard">   <h3 class="revealcard-header">   top 5 loves   </h3>   <ol class="revealcard-list">   <li>first item</li>   <li>second item</li>   <li>third item</li>   <li>fourth item</li>   <li>fifth item</li>   </ol>  </div> 

here css

revealcard-header {   background: #000;   border-radius: 4px 4px 0 0;   color: #fff;   font-size: 1.2em;   font-weight: normal;   margin: 0;   padding: 0.5em;   position: relative; }  .revealcard-header::after {   border: 1px solid #fff;   content: "-";   height: 1.15em;   line-height: 1em;   position: absolute;   right: 0.5em;   text-align: center;   width: 1.15em; }  .revealcard-list {   border: 1px solid #000;   border-top: none;   margin: 0 0 2em 0;   padding-bottom: 1em;   padding-top: 1em; } 

here's working solution:

var header = document.getelementsbyclassname('revealcard-header')[0];  var list = document.getelementsbyclassname('revealcard-list')[0];  var collapsechar = document.getelementbyid('collapsechar');    header.addeventlistener('click', function(){  	// toggle list on click    if (list.style.display.tolowercase() != "none") {    	// hide list      list.style.display = "none";      collapsechar.innerhtml = "+";    }    else {    	// show list      list.style.display = "block";      collapsechar.innerhtml = "−";        }  })

revealcard-header {    background: #000;    border-radius: 4px 4px 0 0;    color: #fff;    font-size: 1.2em;    font-weight: normal;    margin: 0;    padding: 0.5em;    position: relative;  }    .revealcard-header::after {    border: 1px solid #fff;    content: "-";    height: 1.15em;    line-height: 1em;    position: absolute;    right: 0.5em;    text-align: center;    width: 1.15em;  }    .revealcard-list {    border: 1px solid #000;    border-top: none;    margin: 0 0 2em 0;    padding-bottom: 1em;    padding-top: 1em;  }    #collapsechar {    margin-right: 3px;  }

<div class="revealcard">    <h3 class="revealcard-header">    <span id="collapsechar">&minus;</span>top 5 loves    </h3>    <ol class="revealcard-list">    <li>first item</li>    <li>second item</li>    <li>third item</li>    <li>fourth item</li>    <li>fifth item</li>    </ol>   </div>

you have check see if list visible. if it's not, show it; if is, hide it.

it's here fiddle, if want play around it.