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>

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>

• javascript
• jquery
• html
• css
• show-hide

• Try this $("#tab-content2").toggle() in this way, you don't even need css – Aleksandar Toplek Commented Feb 1, 2013 at 14:26
• 5 Both your CSS classes are set to display: none;. Also you have no document ready handler around your jQuery. – Rory McCrossan Commented Feb 1, 2013 at 14:27
• jQuery does come with .show() and .hide()... – JJJ Commented Feb 1, 2013 at 14:27
• Why has no one mentioned that this is a duplicate? Just look at the related questions – Benjamin Gruenbaum Commented Feb 1, 2013 at 14:30

6 Answers 6

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;}

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
});

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.

Try this...

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

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;
}

Have you tried transferring the show class on another line?

.show
{
    display: block;
}