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>

Answer 1

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

Answer 2

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