Slide Toggle menu, tutorial blog

<header>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideToggle( "slow");
          }
          else {
               $(this).hide(0);
          }
     });
}
</script>

 </header>



<body>

  <div style="width:100%; height:auto; float:left;">
         <div style="border: 1px solid blue; background-color: #99CCFF; float:left; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
      
        <div style="border: 1px solid blue; background-color: #99CCFF; float:left; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
        
           <div style="border: 1px solid blue; background-color: #99CCFF; float:left; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
      
       </div>
      
      
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; float:left; background-color: #CCCCCC; display: none;padding: 5px; width: 500px;">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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
   
       
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; float:left;  background-color: #CCCCCC; display: none;padding: 5px; width: 500px;">Div #2</div>
    
      
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; float:left; background-color: #CCCCCC; display: none;padding: 5px; width: 500px;">Div #3</div>
</body>
    

Comments

Post a Comment