Hello All, If you want to make an accordion, this code will help you to make a dynamic accordion using HTML, CSS and Jquery.

An accordion is a stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated with that item.
On clicking a particular item, the content related to it expand below and on further click it will hide the content.

Below is the code to create accordion:

HTML:

<div class="accordion">

  <ul class="bottomMenu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Career</li>
  </ul>
  <div style="clear:both"></div>
  <ul class="menuTxt">
      <li>Products is simply dummy text of the printing and typesetting industry. Products has been the industry's standard dummy text ever since the 1500s. Don't want to send days or weeks. You can use our Professional form.</li>
      <li>Contrary to popular belief, Products is not simply random text. YOu can change two parts of this. This is used to capture the form submissions and send you an email. A Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,</li>
      <li>It is usually a good idea to give your forms a name the value of this field. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</li>
      <li>Finally i got the idea to get of every form should allow users to option of submitting form . If you are going to use a passage of Products, you need to be sure there isn't anything embarrassing hidden in the middle of text.</li>
  </ul>

  </div>

CSS:

    <style>
    li{list-style: none}
.accordian{ width:90%; margin: 0 auto;}
.accordian .bottomMenu{ width:100%;}
.accordian .bottomMenu li{ float:left; width:24.8%; box-sizing:border-box; padding:10px 0; background: #ddd; color:#000; list-style: none; text-align: center; cursor: pointer; border-left:1px solid #666;}
.menuTxt{width: 99.2%;height: 0px;border: 1px solid #666;margin: 0 auto;position: relative;margin-left: 40px;box-sizing:border-box;}
.menuTxt li{  height:0; overflow: hidden;}
.accordian .bottomMenu li.active{ background: red}

    </style>

JS:

<script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  $(function() {
  $('.bottomMenu').children('li').click(function(){
        var getIndex = $(this).index();
        $('.menuTxt').children('li').animate({"height":"0px"});
        if($(this).hasClass('active')){
            $('.menuTxt').animate({"height":"0px"});
            $('.bottomMenu li').removeClass('active');
            $('.menuTxt').children('li').eq(getIndex).animate({"height":"0px"});
        }
        else{
            $('.bottomMenu li').removeClass('active');
            $('.menuTxt').animate({"height":"70px"});
            $('.bottomMenu').children('li').eq(getIndex).addClass('active');
            $('.menuTxt').children('li').eq(getIndex).animate({"height":"100%"});
        }
    });
})

</script>