collapse menu - Real Helper

md.shakil hossain

1312

collapse menu

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<h1>Collapse menu</h1>

<div class="collapse-menu">  
   <div class="collapse-panel">
     <header class="collapse-heading">
       <a href="#" class="collapse-triger">
         25 JUN site outage
       </a>
       <span class="collapse-controls">
         <a class="fa fa-angle-down" href="#"></a>
       </span>
     </header>
     <div class="collapse-body">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </div>     
  </div>
  <div class="collapse-panel">
     <header class="collapse-heading">
       <a href="#" class="collapse-triger">
         26 JUN site outage
       </a>
       <span class="collapse-controls">
         <a class="fa fa-angle-down" href="#"></a>
       </span>
     </header>
     <div class="collapse-body">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </div>     
  </div>
  <div class="collapse-panel">
     <header class="collapse-heading">
       <a href="#" class="collapse-triger">
         27 JUN site outage
       </a>
       <span class="collapse-controls">
         <a class="fa fa-angle-down" href="#"></a>
       </span>
     </header>
     <div class="collapse-body">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </div>     
  </div>
  <div class="collapse-panel">
     <header class="collapse-heading">
       <a href="#" class="collapse-triger">
         28 JUN site outage
       </a>
       <span class="collapse-controls">
         <a class="fa fa-angle-down" href="#"></a>
       </span>
     </header>
     <div class="collapse-body">
       Lorem Ipsum is simply dummy text of the printing and typesetting industr. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </div>     
  </div>
  


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Try it Yourself >>

 body{
  background:url("http://th03.deviantart.net/fs71/PRE/i/2014/019/2/3/autumn_blur___free_texture___background_by_supersweetstock-d72t65j.jpg") #C69B56;
  padding:15px;
  font-family: sans-serif; color:#fff}
h1{text-align:center}

/*=================================*/
.collapse-panel{
  border:1px solid rgba(52,152,219,0.75);
  margin-bottom: 10px;
}
.collapse-heading{
  background:rgba(52,152,219,0.6);
  height: 40px;
  line-height: 45px;
  padding: 0 75px 0 15px;
  position: relative;
}
.collapse-triger{
  color: #fff;
  font-size:22px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration:none;
  display: inline-block;
  width:100%;
}
.collapse-controls {
    position: absolute;
    right: 12px;
    top:2px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.open.collapse-controls {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  top:-5px;
}
.collapse-controls a {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    margin: 0 3px;
    text-decoration: none;
}
.collapse-body{
  padding:15px;
  border-top:1px solid rgba(52,152,219,0.75);
  background:rgba(82,179,219,0.7);
  color:#fff;
  display:none;
}

Try it Yourself >>


$('.collapse-heading').click(function(){
  $('.collapse-body').slideUp();
  $('.collapse-controls').removeClass('open');
    if($(this).next('.collapse-body').css('display') == 'block'){
    	$('.collapse-body').slideUp('open');
  	}
   else{
      $(this).next('.collapse-body').slideDown();
     $(this).children('.collapse-controls').addClass('open');
    }
});

Try it Yourself >>