Show/hide div on button click

Question

I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.

<script type="text/javascript">
    $('a.button-next').click(function() {
        $("#tab-content2").addClass("show");
    });
</script>

CSS:

#tab-content2 {
    display: none;
}
#tab-content2.show {
    display: none;
}

HTML:

<div id="tab-content1">             
    <?php the_content(); ?>
</div>

<div id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

Try this `$("#tab-content2").toggle()` in this way, you don't even need css — Aleksandar Toplek, Feb 01 '13 at 14:26
Both your CSS classes are set to `display: none;`. Also you have no document ready handler around your jQuery. — Rory McCrossan, Feb 01 '13 at 14:27
Why has no one mentioned that this is a duplicate? Just look at the related questions — Benjamin Gruenbaum, Feb 01 '13 at 14:30

score 3 · Accepted Answer · answered Feb 01 '13 at 14:27

3

Try toggleClass and don't forgot to use document.ready():

$(document).ready(function() {
    $('a.button-next').click(function() {
        $("#tab-content2").toggleClass("show");
    });
});

#tab-content2.show {display:block;}

answered Feb 01 '13 at 14:27

Barlas Apaydin

7,233
11
55
86

score 3 · Answer 2 · answered Feb 01 '13 at 14:35

Use a generic class for all content

<div class="content" id="tab-content1">             
    <?php the_content(); ?>
</div>
<div class="content" id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

So the css would be

.content {
    display: none;
}

And the Javascript

$('a.button-next').click(function() {
    $('.content').hide(); // To hide all other contents
    $("#tab-content2").show(); // Show the one content you want to display
});

score 1 · Answer 3 · answered Feb 01 '13 at 14:28

1

The display property of show is none.

Change it to block.

Also, you can just use the .show() or .hide() function instead of using classes.

answered Feb 01 '13 at 14:28

Brandon

68,708
30
194
223

score 1 · Answer 4 · answered Feb 01 '13 at 14:28

1

Try this...

$('a.button-next').on('click', function() {
    $("#tab-content2").toggle("show");
});

answered Feb 01 '13 at 14:28

MG_Bautista

2,593
2
18
33

score 1 · Answer 5 · answered Feb 01 '13 at 14:44

HTML

<div id="tab-content-holder">
    <div id="tab-content1 show">             
        <?php the_content(); ?>
    </div>

    <div id="tab-content2">     
        <?php the_field("experience");?>
    </div>
</div>

<a href="#" class="button-back">Previous</a>
<a href="#" class="button-next">Next</a>

JS

$(document).ready(function() {
    $(".button-back").click(function() {
        MenuNavigationClick(-1);
    });
    $(".button-next").click(function() {
        MenuNavigationClick(1);
    });

    function MenuNavigationClick(direction) {
        // Get current element index and toggle
        var current = $("#tab-content-holder .show");
        var index = current.index();
        current.toggleClass("show");

        // Move to next element and check for overflow
        index += 1 * direction;
        index %= $("#tab-content-holder div").length;

        // Toggle next element
        $("#tab-content-holder div:eq("+index+")").toggleClass("show");
    }
});

CSS

#tab-content-holder div {
    display: none;
}
#tab-content-holder div.show {
    display: block;
}

score 0 · Answer 6 · edited Feb 01 '13 at 14:52

0

Have you tried transferring the show class on another line?

.show
{
    display: block;
}

edited Feb 01 '13 at 14:52

Jon Egerton

40,401
11
97
129

answered Feb 01 '13 at 14:30

whastupduck

1,156
11
25

Show/hide div on button click

6 Answers6

Linked