Question

Hi Sorry for this noob question but here goes…i have a working slidetoggle on a test site of mine, however when i click the “slide” button, i would like that button to change to “close”..and then change back to “slide” when you click close…again sorry for the newbie question.. heres my code..

<script>
/*#boxmove is my button*/
/*.box1 is my sliding panel*/

 $('#boxmove').click(function() {
 $('.box1').slideToggle('slow', function(showOrHide) {

});
});
</script>

i know if i add the following i can get it to show the close on click…but i dont know how to “toggle” that text (maybe within a if/else statment?)…

<script>
$('#boxmove').click(function() {
$('.box1').slideToggle('slow', function(showOrHide) {
document.getElementById('boxmove').innerHTML = 'close';          
});
});
</script>

Answer 1

First of all if you are using jQuery use it completely. To access element by id you can use id selector $('#elementId').

Inside the slideToggle callback you can use text jQuery method to set the text of the button conditionally. I am using is jQuery method to check if the box is visible or not and based on that setting the text of the button.

$('#boxmove').click(function() {
      $('.box1').slideToggle('slow', function(showOrHide) {
          $('#boxmove').text($(this).is(':visible')? 'slide' : 'close');          
      });
});