CODEWITHSUNDEEP
javascriptjquerycsshtml
Vicky
Vicky

Reputation: 704

Hide Previous div and toggle next div on click a button?

I have a number of buttons in my html. Each button referring to a particular DIV. I want an easy way to hide the previously open DIV when another button is clicked. So far I have written a code in jquery, but I have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what I have tried to accomplish?

Here is what I have done so far.

My HTML:

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>TODO supply a title</title>
            <meta name="viewport" content="width=device-width"/>   
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>                      
        </head>
        <body>
            <div id="body">
            <input type="button" name="division1" value="div1" class="buttons" id="button1"/>
            <input type="button" name="division2" value="div2" class="buttons" id="button2"/>
            <input type="button" name="division3" value="div3" class="buttons" id="button3"/>
            <input type="button" name="division4" value="div4" class="buttons" id="button4"/>
            <input type="button" name="division5" value="div5" class="buttons" id="button5"/>
            <input type="button" name="division6" value="div6" class="buttons" id="button6"/>
            <div id="div1" class="divs"></div>
            <div id="div2" class="divs"></div>
            <div id="div3" class="divs"></div>
            <div id="div4" class="divs"></div>
            <div id="div5" class="divs"></div>
            <div id="div6" class="divs"></div>
            </div>
        </body>
    </html>

My CSS:

            #body{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;    
                background-color: #000;
            }
            .buttons{
                width: 10%;
                height: 5%;
                position: relative;
                left: 10%;
                cursor: pointer;
                z-index: 500;
            }
            .divs{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: none;
            }
            #div1{
                background-color: #377D9F;
            }
            #div2{
                background-color: #02B0E6;
            }
            #div3{
                background-color: #4b9500;
            }
            #div4{
                background-color: #aaa;
            }
            #div5{
                background-color:#aa0000;
            }
            #div6{
                background-color: aquamarine;
            }

My Jquery:

        $(document).ready(function () {       
        $("#button1").click(function () {
              $('#div1').toggle(100);
                  $("#div2,#div3,#div4,#div5,#div6").hide();               
        });          
         $("#button2").click(function () {
            $("#div2").toggle(100);
            $("#div1,#div3,#div4,#div5,#div6").hide();    
        });
         $("#button3").click(function () {
            $("#div3").toggle(100);
            $("#div1,#div2,#div4,#div5,#div6").hide();    
        });
         $("#button4").click(function () {
            $("#div4").toggle(100);
            $("#div1,#div2,#div3,#div5,#div6").hide();    
        });
         $("#button5").click(function () {
            $("#div5").toggle(100);
            $("#div1,#div2,#div3,#div4,#div6").hide();    
        });
         $("#button6").click(function () {
            $("#div6").toggle(100);
            $("#div1,#div2,#div3,#div4,#div5").hide();    
        });
    });

I kind of have around 50 DIV's in my html like the above ones. And I think using the above JQUERY is a waste of coding lines. I know there will be a better way to do this. My code seems to work well, but is there any way in jquery to just hide the previous DIV, no matter which button user clicks?

Upvotes: 3

Views: 6226

Answers (4)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15837

$(document).ready(function(){

$(".buttons").click(function () {
            var divname= this.value;
              $("#"+divname).slideToggle().siblings('.divs').hide("slow");
            });
 });

Upvotes: 2

Kazakh
Kazakh

Reputation: 104

<input type="button"  value="div1" class="buttons" id="button1" />
<input type="button"  value="div2" class="buttons" id="button2" />
<input type="button"  value="div3" class="buttons" id="button3" />
<input type="button"  value="div4" class="buttons" id="button4" />
<input type="button"  value="div5" class="buttons" id="button5" />
<input type="button"  value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
    $(".buttons").click(function () {
    $('.divs').hide();
    $('#div'+$(this).attr('id').replace('button','')).toggle(100);
      })

  })
</script>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

Going with this sentence I kind of have around 50 DIV's in my html like the above ones

This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div

Demo

HTML

<select id="show_divs">
    <option>Select to show a div</option>
    <option value="1">Show 1</option>
    <option value="2">Show 1</option>
</select>

<div class="parent">
    <div id="show1">This is the first div</div>
    <div id="show2">This is the second div</div>
</div>

jQuery

$('#show_divs').change(function() { //onChange execute the function
    var showDiv = $(this).val(); //Store the value in the variable
    $('div.parent > div').hide(); //Hide all the div nested inside .parent
    $('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});

CSS

div.parent > div {
    display: none; /* Hide initially */
}

If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20428

Try this

$(document).ready(function() {
    $(".divs").hide();

    $(".buttons").click(function() {
        $(".divs").hide().eq($(this).index()).show();
    });
});

DEMO

Upvotes: 1

Related Questions