jquery to display diffrent text onclick

Question

I have this current script which works great for changing class names

    $('#mydiv li a').click(
    function(e) {
      e.preventDefault(); // prevent the default action
      e.stopPropagation(); // stop the click from bubbling
      $(this).closest('ul').find('.current').removeClass('current');
      $(this).addClass('current');

    });

              <ul>
                   <li><a href="" class="current">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                   <li><a href="#">four</a></li>
               </ul>

Now i have 4 diffrent div's area

    <div id="first">some text and form</div>
    <div id="second">some text and form</div>
    <div id="third">some text and form</div>
    <div id="last">some text and form</div>

which i have hidden with jquery like $(#second).hide(); $(third).hide();$(last).hide(); so when page loads one #first is visible on page, if i click on second href from above list item i wants to initialize $(second).show(); and hide other 3 div's, if i click on 3rd href from above list i wants to display $(#third).show(); and so on.

So from 4 div's only one should be visible on page. can someone help me to show how i can achieve it with above code? Thanks

Elliot Nelson · Accepted Answer · 2011-10-07 00:54:35Z

1

$('#mydiv li a').click(function(e) {
  $(this).closest('ul').find('.current').removeClass('current');
  $(this).addClass('current');

  $(this.href).show().siblings().hide();
  return false;
});


<ul>
  <li><a href="#first" class="current">one</a></li>
  <li><a href="#second">two</a></li>
  <li><a href="#third">three</a></li>
  <li><a href="#last">four</a></li>
</ul>

<div id="first">some text and form</div>
<div id="second">some text and form</div>
<div id="third">some text and form</div>
<div id="last">some text and form</div>

answered Oct 7, 2011 at 0:54

Elliot Nelson

11.6k3 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user969068 Over a year ago

thanks for the reply but those last 4 div's are all visible on page, i tried to add $("#first").hide(); etc for all 4 div but those stay always hidden. any idea please

Elliot Nelson Over a year ago

Ah, I misunderstood that part. As griegs suggested above, add a class to all of your divs and in your CSS just set that class to display:none.

user969068 Over a year ago

thank you but that code is also not working, you see when page loads href one in li has current item and #first is on page visible, so what i want is when i click on two href in li it hide that #first and display #second on page and so on for all 4 divs.

Elliot Nelson Over a year ago

Check out a demo here: jsfiddle.net/eMsQT. Is that what you're looking for?

griegs · Accepted Answer · 2011-10-07 01:01:45Z

0

<div class="contentDiv" id="first">some text and form</div>
<div class="contentDiv" id="second">some text and form</div>
<div class="contentDiv" id="third">some text and form</div>
<div class="contentDiv" id="last">some text and form</div>

          <ul>
               <li class="first"><a href="" class="current">one</a></li>
               <li class="second"><a href="#">two</a></li>
               <li class="third"><a href="#">three</a></li>
               <li class="fourth"><a href="#">four</a></li>
           </ul>

Now on click do $(".contentDiv").hide();

then simply show the one you want.

edited Oct 7, 2011 at 1:01

answered Oct 7, 2011 at 0:46

griegs

22.8k33 gold badges132 silver badges207 bronze badges

2 Comments

user969068 Over a year ago

thanks for your reply, could you please show me an example with complete jquery code line, i am pretty new to this and trying to learn it. thank you

user969068 Over a year ago

hi, i tried above method but if i hide in css .contentDiv { display:none;} and add in click function $(".contentDiv").hide(); nothing is being displayed on page, then i added $(".contentDiv").show(); and it display all div's same time and when i click next href from li it dont change anything.

adeneo · Accepted Answer · 2011-10-07 02:29:09Z

0

Try this

$("#mydiv li a").click(function(e) {
   $(this).closest('ul').find('.current').removeClass('current');
   $(this).addClass('current'); 
   $("#mydiv > div").hide();
   var T = $(this).parent().index();
   if (T===0) {
       $("#first").show();
   } else if(T==1) {
       $("#second").show();
   } else if(T==2) {
       $("#third").show();
   } else if(T==3) {
       $("#last").show();
   }

  e.stopPropagation();
});

http://jsbin.com/izoxuv/edit#javascript,html,live

edited Oct 7, 2011 at 2:29

answered Oct 7, 2011 at 2:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

jquery to display diffrent text onclick

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related