CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
CrazyCoder
CrazyCoder

Reputation: 2378

Show or hide buttons based on div visibility jquery

I have 2 buttons on my page, say button1 and button2. And also a div below it.
Something like below. 

    $("#button1,#button2").click(function () {
            $("#div1").toggle("Slow");
    
            if ($("#div1").is(':visible')) {               
                $('#button1').show();
                $('#button2').hide();
            } else {            
                $('#button1').hide();
                $('#button2').show();
            }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

This doesn't seem to work.

Upvotes: 0

Views: 211

Answers (6)

David
David

Reputation: 668

In your code no matter what button is pressed so you should split it onto 2 functions or use $(this) to refer to the button that has been pressed:

    $("#button1,#button2").click(function () {
        $("#div1").toggle("Slow");
    
        $('input').each(function(){
            //show all button
            $(this).show();
        })

        //hide pressed button
        $(this).hide();
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
          <input type="image" id="button1" src="Images/down.png" alt="Submit1" width="25" height="25">
          <br>
          <input type="image" id="button2" src="Images/up.png" alt="Submit2" width="25" height="25">
    </div>
    <div id="div1">
          Welcome!!!
    </div>

You can see a live example here:

https://jsfiddle.net/xv6eorkk/

(you should also hide the button you want at the beginning with css to make it more realistic)

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

$(document).ready(function(){
$('#button1,#button2').click(function(){
    $("#div1").toggle("Slow"); 
    $(this).toggle("Slow");
    if($(this).attr('id')=='button1'){$('#button2').show();}
    else{$('#button1').show();}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divClick">
      <button type="button" id="button1">Btn 1</button>
      <button type="button" id="button2">Btn 2</button>
   
</div>

<br/><br/>

<div id="div1">
      Welcome!!!
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you set the initial state using CSS, you can simply call toggle() on both buttons and the #div1 element in a single click event handler:

$('.button').click(function() {
  $('#div1, .button').toggle();
});
#button1, #div1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
  <input type="image" id="button1" src="Images/down.png" alt="Down" width="25" height="25" class="button">
  <input type="image" id="button2" src="Images/up.png" alt="Up" width="25" height="25" class="button">
</div>
<div id="div1">
  Welcome!!!
</div>

Note that I added a button class to the input elements. This can easily be replaced with input[type="image"] if you have no control of the HTML.

Upvotes: 0

Vignesh Raja
Vignesh Raja

Reputation: 8741

This works perfectly.

$("#button1").click(function(){
    $(this).hide();
    $("#button2, #div1").toggle(true);
});
$("#button2").click(function(){
    $("#button2, #div1").toggle(false);
    $("#button1").toggle(true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divClick">
      <input type="image" id="button1" src="Images/down.png" alt="Show" width="25" height="25" style="display:none">
      <input type="image" id="button2" src="Images/up.png" alt="Hide" width="25" height="25">
</div>
<div id="div1">
      Welcome!!!
</div>

Upvotes: 0

Pavlo
Pavlo

Reputation: 1197

HTML

<div id="divClick">
   <input type="image" id="button1" class="toggleButton" src="Images/down.png" alt="Submit" width="25" height="25">
   <input type="image" id="button2" class="toggleButton" src="Images/up.png" alt="Submit" width="25" height="25">
</div>
<div id="div1">
          Welcome!!!
</div>

JS

$(".toggleButton").click(function () {
      $("#div1").toggle("Slow", toggleOnComplete);
    });

function toggleOnComplete(){
   if ($("#div1").is(':visible')) {               
      $('#button1').show();
      $('#button2').hide();
   } else {            
      $('#button1').hide();
      $('#button2').show();
   }
}

I added a class in the HTML, because the button have the same functionality.

The thing that goes wrong is that you toggle visibility and immediately ask if the div is visible or not.

While #div1 is fading away it is still visible as it is performing an animation, so instead you have to call a function after the animation is done toggeling.

.toggle() knows when it is done, so it also knows when to call the function that you define.

Upvotes: 0

4b0
4b0

Reputation: 22323

Use this and siblings.

$("#button1,#button2").click(function(e) {
  $("#div1").toggle("Slow");
  $(this).hide();
  $(this).siblings().show();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClick">
  <input type="image" id="button1" src="Images/down.png" alt="Submit" width="25" height="25">
  <input type="image" id="button2" src="Images/up.png" alt="Submit" width="25" height="25">
</div>
<div id="div1">
  Welcome!!!
</div>

Upvotes: 0

Related Questions