Accordion menu with jQuery in slideToggle() method

Welcome to Designers Dairy blog here i have posted how to show and hide elements in

slideToggle() method




Step1:
 
Script:

<script src="jquery.min.js"> </script>

<script type="text/javascript">


    $(document).ready(function()
    {
          $(".plus").click(function()
       
        {
          $(this).find ("#panel").slideToggle();
       
            if ($(this).hasClass("plus"))
            {
                   
                   $(this).addClass("minus");
                   $(this).removeClass("plus");
                  
            }
            else
            {
               
                   $(this).removeClass("minus");               
                   $(this).addClass("plus");
                 
            }
           
        });
    });   
</script>

Step2:




Style:

<style type="text/css">
#panel
{
    display:none;
    color:#000;
}
.menu ul
{
    text-decoration:none;
    list-style-type:none;
   
}
.minus
{
        background: url(minus.png) no-repeat 0 0;

}
.plus
{
        background: url(plus.png) no-repeat 0 0;
}
.menu li a
{
    text-decoration:none;
    color: #000;
    padding:0px 15px 0px 15px;

    margin:0px 0px 15px 0px;
   
}
.display_none
{
    display:none;
}
</style>

Step3: 

Html Code:



<div class="menu">
<ul>
<li class="plus"> <a href="#" > Home </a>
<ul id="panel">
<li> hello </li>
<li> cool </li>
</ul>
</li>
<li class ="plus" > <a href="#"> About us</a>
<ul id="panel">
<li> hello </li>
<li> cool </li>
</ul>
</li>
<li class="plus"> <a href="#"> Service</a>
<ul id="panel">
<li> hello </li>
<li> cool </li>
</ul>
</li>
<li class="plus"> <a href="#"> Profile </a> </li>
<li> <a href="#"> Contact us </a> </li>
</ul>
</div>

Step4:

Enjoy Folks
 
Output:

show and hiding the Elements on Click and Each function

Welcome to Designers Dairy blog here i have posted how to show and hide the selected Elements using

JavaScript in Click and Each function

Step1:


 Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

<script type="text/javascript">

$(function()
{
    $('.slider'). each(function() {
       
        $(this).click(function()
       
        {
           
            var Clickeddivid = $(this).attr('data-field');
              
        $('.launchpad').each(function()
       
        {
           
             var visibledivid = $(this).attr('id');
             
           
              if (Clickeddivid == visibledivid)
              {
                 
                  $(this).css('display', 'block');
              }
             
              else
              {
                 
                   $(this).css('display', 'none');
                 
              }
                       
           
        });
       
       
    });   
       
});
   
   
});


</script>



Step2:

 Style:

<style type="text/css">

.display_hide
{
    display:none;
}
</style>




Step3:

Html Code:

<div id="test-1" class="launchpad">
LaunchPad - 1  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 id="test-2" class="launchpad display_hide">
LaunchPad - 2  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>

Navigation:

<div class="slider selected_circle"  data-field="test-1"> <a href="#">1</a></div>
<div class="slider select_circle"   data-field="test-2"><a href="#">2</a></div>





 To Added the Rounded Circle or Image in Navigation we have to add


 Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

<script type="text/javascript">

$(function()
{
    $('.slider'). each(function() {
       
        $(this).click(function()
       
        {
           

  $('.slider').each (function()
     {

          $(this).addClass('select_circle').removeClass('selected_circle');
        
     });


        var Clickeddivid = $(this).attr('data-field');

              $(this).addClass('selected_circle').removeClass('select_circle');
         
              
        $('.launchpad').each(function()
       
        {
           
             var visibledivid = $(this).attr('id');


             
           
              if (Clickeddivid == visibledivid)
              {
                 
                  $(this).css('display', 'block');
              }
             
              else
              {
                 
                   $(this).css('display', 'none');
                 
              }
                       
           
        });
       
       
    });   
       
});
   
   
});


</script>


Style:

.select_circle
 {
background: url(images/slider_circle.png) no-repeat 0 0;
width:11px;
 height:12px;
cursor:pointer;
}

.selected_circle
{

background: url(images/selected_circle.png) no-repeat 0 0;
 width:12px;
 height:12px; 
 cursor:pointer;
 }




Step4:

Enjoy Folks