How to open different divs by clicking on a single button?

Question

I have a button/link. I want to open multiple divs on multiple clicks on a single button.

    <a href="#">Link</a>

<div id="one">one</div>
<div id="Two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>

Any help? Thanks-

User meant on "open multiple divs on multiple clicks on a single button" (cite from comment):

"What I meant is, when I click first time on link, first div "one" will appear, when I click on 2nd time, 2nd div "Two" will appear & it'll overwrite the first div.. & it'll continue like that."

say divs are hidden on initial state.. – subho das Oct 28 '11 at 07:16 — subho das, Oct 28 '11 at 07:16

Baz1nga · Accepted Answer · 2011-10-28T07:35:12.027

2

<a href="#" id="clickMe" divToShow="div1">Link</a>
<div  id="1">one</div>
<div  id="2">Two</div>
<div id="3">Three</div>
<div id="4">Four</div>


<script type="text/javascript">
var counter=1;
  $("#clickMe").live("click",function (e) {
    e.preventDefault();
    $("#"+(counter++))).show();
  });

</script>

edited Oct 28 '11 at 07:35

answered Oct 28 '11 at 07:22

Baz1nga

15,485
3
35
61

Just for info - id cannot start with number - you need to prefix it. – easwee Sep 19 '12 at 10:55
btw HTML 5 specs allows number as Id – Baz1nga Sep 19 '12 at 18:13

score 1 · Answer 2 · answered Oct 28 '11 at 07:21

You could change the names of your div-tags to something like div_1, div_2 etc and iterate trough them in a javascript function. This could be a propper possibility to address them for what ever you mean by open.

Your JavaScript might look something like this:

<script type="text/javascript">
    var temp = 1;
    function openDiv() {
        var elem = document.getElementById('div_' + temp);
        if (elem != -1) {
            elem.doWhatEverYouMeanByOpen();
            temp = temp + 1;
        }
    }
</script>

In your HTML you can call this function when clicking the link like:

<a href="#" onlick="openDiv();">Link</a>

score 1 · Answer 3 · answered Oct 28 '11 at 08:28

give this a try:http://jsfiddle.net/m9EKS/

<a href="#" id="clickMe">Link</a>

<div class="test">one</div>
<div class="test">Two</div>
<div class="test">Three</div>
<div class="test">Four</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        $(".test:hidden").first().show();
    });
});
</script>


<style type="text/css">
    .test { display : none; }
</style>

Ayush · Answer 4 · 2011-10-28T07:31:31.037

0

One way to do it would be via Javascript (Jquery not necesarry).

Set all divs to be initially hidden.

<div id="one" class="showHide">one</div>
<div id="Two" class="showHide">Two</div>
<div id="Three" class="showHide">Three</div>
<div id="Four" class="showHide">Four</div>

div.showHide{visiblity:hidden}

Your link would call a JS function

<a href="#" onclick="showHide()">Link</a>

<script type="text/javascript">
 var clickCount=1;
 function showHide()
 {
    elementName = 'div'+clickCount;
    var switchTo = 'hidden';
    if (document.getElementById(elementName ).style.visibility == 'hidden')
        switchTo = 'visible';            

    document.getElementById(elementName ).style.visibility = switchTo ;
    clickCount++;

 }
</script>

edited Oct 28 '11 at 07:31

answered Oct 28 '11 at 07:20

Ayush

41,754
51
164
239

oh, just realized you want to show the divs one at a time on multiple clicks of the same button. My code isn't for that. – Ayush Oct 28 '11 at 07:25
question is tagged jquery and why is this a better solution? how can you be sure that all the browsers support style.visibility – Baz1nga Oct 28 '11 at 07:32
i do not use or imply the word 'better' – Ayush Oct 28 '11 at 07:33

score 0 · Answer 5 · answered Oct 28 '11 at 07:48

If you need to toggle between divs you can use this example:

<style type="text/css">
    .show { display : block; }
    .hide { display : none; }
</style>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        var visibleElement = $("#splash .show");
        visibleElement.removeClass("show").addClass("hide");
        if (visibleElement.next().length > 0) {
            visibleElement.next().removeClass("hide").addClass("show");
        }
        else {
            $("#splash div:first").removeClass("hide").addClass("show");
        }
    });
});
</script>

<a href="#" id="clickMe">Link</a>

<div id="splash">
    <div class="show">one</div>
    <div class="hide">Two</div>
    <div class="hide">Three</div>
    <div class="hide">Four</div>
</div>

How to open different divs by clicking on a single button?

5 Answers5

Linked