CODEWITHSUNDEEP
jquery
tom kenar
tom kenar

Reputation: 11

show and hide two elemnts with jQuery

I'm trying to do two things and I don't really have a clue how to do them... I have two elements, the first is displayed and second is not, and i want on the push of a button that the first will disappear and the second will appear, that was simple enough and here is where I get lost:

I want on the second push the first of all the second element will disapear and then the first one to reappear, I only managed to achieve that the first div will reappear and only then the second one will disappear.

Another thing that when I press the button the value will change and when I press it again it will turn back, for example instead of click me it will say press here and will turn back (what I really want in my website is to change an img between the clicks) here is my code so far
HTML

<div id="hebeng"></div>
<div id="aboutheb">hello</div>
<div id="abouteng">hello</div>

JS

   $(document).ready(function () {
      $("#hebeng").click(function () {
          $("#aboutheb").slideToggle('slow', function () {
              $("#abouteng").slideToggle('slow');
          });
      });

  });

Fiddle

Upvotes: 1

Views: 42

Answers (4)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Hi I edited your JSFiddle code to check for the text 'click me' and if it's there to change it to 'press here' on toggle and if not, to change it back to 'click me'. It's pretty simple (could be coded better probably) but it works: 

$(document).ready(function () {
   $('.change').text('click me'); 
  $("#hebeng").click(function () {
      $("#aboutheb").slideToggle('slow', function () {
        $("#abouteng").slideToggle('slow');
          if ($('.change:contains("click me")').length > 0) {
              $('.change').text('press here');
            } else {
              $('.change').text('click me'); 
          }
      });
  });
});

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

Try this 

  $("#hebeng").on("click", function () {
      $("#aboutheb, #abouteng").slideToggle('slow')
  });

Upvotes: 1

Or Duan
Or Duan

Reputation: 13830

You should give the 2 elemetns same class name:

<div id="hebeng">

</div>
<div id="aboutheb" class="toggled">hello</div>
<div id="abouteng"  class="toggled">hello</div>

Then use this jQuery code:

$("#hebeng").click(function () {
    $(".toggled").slideToggle('slow');
});

Working example

Upvotes: 2

Ajinkya
Ajinkya

Reputation: 22720

  $("#hebeng").click(function () {
      $("#aboutheb").slideToggle('slow');
      $("#abouteng").slideToggle('slow');
  });

Fiddle

Upvotes: 2

Related Questions