Question

By default content of first div will load then when a user click on tag,contents of that div should load.

HTML:

    <a class="first">one</a>
    <a class="second">two</a>
    <div>
       <li id="first">
           <h2>pen</h2>
           <div>
               <div>parker</div>
           </div>
      </li>
      <li id="second">
            <h2>car</h2>
            <div>Bugatti</div>
         </div>
       </li>
    </div>​

JS:

$(document).ready(function() {
    $("li#second").html();
    $("li#first").hide();
    $("a").click(function () {         
        var id = $(this).attr("class");  
        $("li#"+id).show().html();          
        $("li#second").hide();
     });
 });​

Now,when you click one,it will load but if you click two it will not load,i’m using second.hide(),how to get this working ?

Answer 1

You’re currently binding to every a click, and then you show the corresponding li to whichever link is clicked, but you always hide #second, regardless of whether or not it is .second that is being clicked.

You could bind them individually:

$('a.first').click(function() {
    $('#first').show();
    $('#second').hide();
});

$('a.second').click(function() {
    $('#first').hide();
    $('#second').show();
});

Demo

Or, if you want to address both in one listener:

$('a').click(function() {
   var id = $(this).attr('class');
   $('#first').toggle(id == 'first');
   $('#second').toggle(id == 'second');
});

Demo