Question

I have multiple toggle divs on the same page, and the div I’m toggling must be displayed in the same div.

I have, in a div called ‘box’, six divs named ‘1’, ‘2’, ‘3’, ‘4’, etc., and they are all hidden. If I click on an a tag named ‘1’ it will display the contents of div 1 in ‘box’, div. If I click tag a named ‘2’, the contents of div 2 will display in ‘box’ and hide div 1, and so on.

My problem is that I haven`t been able to hide div 1 if div 2 is showing

This is my code:

$(document).ready(function () {
    $('#content1').hide();
    $('#content').hide();
    var Prutswonder;
    $('a.aici').click(function () {
        $('#content1').toggle('slow');
    });

    $('a.acolo').click(function () {
        $('#content').toggle('slow');
    });

    $("#" + Prutswonder).show("slow");
    $(".toggle").not("#" + Prutswonder).hide("slow");
});

I need an if function to hide all except the div that is showing.

Answer 1

You can hide all divs and then show the one you want…

<script>
    // i'm assuming all your divs' names begins with 'content'
     $(document).ready(function(){   
       $('#content1').hide();
       $('#content').hide();

       $('a.aici').click(function(){
         $("div[id^='content']").hide();
         $('#content1').toggle('slow');
       });

       $('a.acolo').click(function(){
         $("div[id^='content']").hide();
         $('#content').toggle('slow');
       });

     });
</script>