javascript, div buttons with if else

Question

$(document).ready(function() {
    $('#b1').click(function() {
         $('#uch').toggle("slow");
    });
    $('#b2').click(function() {
         $('#uch2').toggle("slow");
    })
})

I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too. fiddle example of my buttons

affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.

edited fiddle

 $(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})

Rory McCrossan · Accepted Answer · 2016-03-30 11:01:08Z

2

You can call hide('slow') on the other uch element on click of the button. Try this:

$('#b1').click(function() {
    $('#uch').toggle("slow");
    $('#uch2').hide("slow");
});
$('#b2').click(function() {
    $('#uch').hide("slow");
    $('#uch2').toggle("slow");
});

Working example

answered Mar 30, 2016 at 11:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Rory McCrossan Over a year ago

No problem, glad to help

Lalji Tadhani · Accepted Answer · 2016-03-30 11:07:48Z

1

Change ID To Class

$(document).ready(function() {
  $('.b1').click(function() {
  $('.uch').hide();
    $(this).find('.uch').toggle("slow");
  });
});

https://jsfiddle.net/u28f6yeL/5/

answered Mar 30, 2016 at 11:07

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

1 Comment

elchinsolo Over a year ago

in this way i lose smooth animation and it loops, somehow not what i really wanted , but i cached idea thx

Vladimir Drenovski · Accepted Answer · 2016-03-30 11:16:55Z

0

Here is a working solution for your problem: change your JQuery code like this:

$(document).ready(function() {
  $('#b1').click(function() {
     if($('#uch2').css('display') != 'none'){
          $('#uch2').toggle("slow");
};
    $('#uch').toggle("slow");
  });
  $('#b2').click(function() {
     if($('#uch').css('display') != 'none'){
          $('#uch').toggle("slow");
};
    $('#uch2').toggle("slow");
  });



});

Here's a JSFiddle

answered Mar 30, 2016 at 11:16

Vladimir Drenovski

3002 silver badges10 bronze badges

Comments

TEST · Accepted Answer · 2016-03-30 11:02:25Z

-1

you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.

answered Mar 30, 2016 at 11:02

TEST

677 bronze badges

Collectives™ on Stack Overflow

javascript, div buttons with if else

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related