Create Toggle contents

Create Toggle contents

Download

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() { 
 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();
 //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
 $(".tgg-trigger").click(function(){
  $(this).toggleClass("active").next().slideToggle("slow");
  return false; //Prevent the browser jump to the link anchor
 });
 }); 
</script>
<style>
body { font-family: Arial, Helvetica, tahoma sans-serif; font-size:12px; line-height:1.6; color:#282828; }
.tgg-trigger { padding: 0; margin: 0; width:100%; display:block; background:url(images/acc_style_1_arr_closed.png) no-repeat right center; padding: 0; overflow: hidden; clear: both;  }
.tgg-trigger .active {background:url(images/acc_style_1_arr_opened.png) no-repeat right center;}

#toggle_style {background:#f6f6f6; border:1px solid #dfdfdf; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; width:600px; margin-bottom:25px; }
#toggle_style .tgg-trigger {
 border-bottom:1px solid #dfdfdf; line-height:2.8; font-weight:bold; text-shadow:0 1px 0 #fff; color:#6e6e6e; width:auto;
 background: #fafafa;
 background: -moz-linear-gradient(top, #fafafa 0%, #e6e6e6 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e6e6e6));
 background: -webkit-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 background: -o-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 background: -ms-linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 );
 background: linear-gradient(top, #fafafa 0%,#e6e6e6 100%);
}
#toggle_style .tgg-trigger span {display:block; padding:0 0 0 30px; background:url(images/arr2.png) no-repeat 8px 13px; }
#toggle_style .tgg-trigger.active { color:#444; }
#toggle_style .tgg-trigger.active span {background:url(images/arr2.png) no-repeat 8px -28px; }
#toggle_style .tgg-item.first .tgg-trigger {
 -webkit-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px; border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; border-top-right-radius: 4px;
}
#toggle_style .tgg-item.last .tgg-trigger {
 border-bottom:0;
 -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
 -webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
}
#toggle_style .toggle_container {padding:20px 20px 0; border-bottom:1px solid #dfdfdf; margin:0; }
#toggle_style .tgg-item.last .toggle_container {border-bottom:0; }
</style>



<h3>TOGGLE</h3>
                   <div id="toggle_style">
                       <div class="tgg-item first">
                           <a href="#" class="tgg-trigger"><span>Fusce neque felis</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item">
                           <a href="#" class="tgg-trigger"><span>Proin tempor neque mi</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item">
                           <a href="#" class="tgg-trigger"><span>Ligula eleifend posuere</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                       <div class="tgg-item last">
                           <a href="#" class="tgg-trigger"><span>Pretium dignissim elit nec feugiat</span></a>
                           <div class="toggle_container">
                               <p>Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.</p>
                               <p>Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.</p>
                           </div>
                       </div>
                   </div>