CODEWITHSUNDEEP
javascriptjqueryhtmlcssfunction
elchinsolo
elchinsolo

Reputation: 90

javascript, div buttons with if else

$(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");
});
})

Upvotes: 1

Views: 77

Answers (4)

Vladimir Drenovski
Vladimir Drenovski

Reputation: 300

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

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Change ID To Class

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

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

Upvotes: 1

TEST
TEST

Reputation: 67

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

Upvotes: -1

Rory McCrossan
Rory McCrossan

Reputation: 337580

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

Upvotes: 2

Related Questions