0

i am trying to make a div toggle another div which appears underneath it.

I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...

Here are the two divs i have

//This div is the one you click on
      <div id="more_toggle"></div><!---end more_toggle--->

//This div is the one that appears and disappears through the toggle        
      <div id="more_info">hello</div><!---end more_info--->

This is the script i use to toggle the divs through buttons, but it doesn't work with another div

$(function(){    
    $("#server_status_button").click(function(event){
        event.preventDefault();
        $("#status1").slideToggle();
    });    
});

Thanks for any help

1
  • This sounds like a selector problem. Perhaps you should try adding a console.log($("#status1")) line in your click handler to make sure that you are calling .slideToggle() on what you expect.
    – jacobq
    Jul 25, 2012 at 21:21

3 Answers 3

2
$("#more_toggle").click(function(event) {
    $("#more_info").slideToggle();
});​

jsFiddle example

0

Have you tried:

$(function() {
    $('#more_toggle').click(function(e) {
          $('#more_info').slideToggle();
    });
});

If you want to hide use display toggling just try .toggle() instead of .slideToggle().

2
  • There's no need for preventDefault Jul 25, 2012 at 21:11
  • True was just basing off his already posted code. Also I used $(function() {}) because he still might want to keep it on ready.
    – Darren
    Jul 25, 2012 at 21:12
0
$('#more_toggle').click(function(){
    $('#more_info').slideToggle(); 
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.