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