Show Hide Div using Next Previous Button in jQuery

In this example, I explain show hide div using next previous button in jquery. we will discuss about of show hide div jquery using next previous button. Some time you need show hide div with next previous button when you have multiple fields in your form.

In this post i explain step by step show hide div jquery demo using next previous button and last save form data. so let’s following this example.

Read Also :  Enter Only Number in Textbox using jQuery

Show Data With Previous and Next Button Using jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Show Hide Div using Next Previous Button in jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>
    .container{
        margin-top:50px;
    }
    .multiple_section{
        display:none;
    }
  </style>
</head>
<body>

<div class="container">
    <form action="">
        <div class="multiple_section" id="section_1" style="display:block">
            Section 1
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_2">Next</button>
        </div>
        <div class="multiple_section" id="section_2">
            Section 2
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_1">Prev</button>
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_3">Next</button>
        </div>
        <div class="multiple_section" id="section_3">
            Section 3
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_2">Prev</button>
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_4">Next</button>
        </div>
        <div class="multiple_section" id="section_4">
            Section 4
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_3">Prev</button>
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_5">Next</button>
        </div>
        <div class="multiple_section" id="section_5">
            Section 5
            <button type="button" class="btn btn-primary next-prev" data-next-prev="section_4">Prev</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
</div>

</body>
<script>
    $(document).ready(function(){
        $(".next-prev").click(function(){
            var section = $(this).attr("data-next-prev");
            $(".multiple_section").css("display","none");
            $("#"+section).css("display","block");
        });
    });

</script>
</html>

I hope you understand of jquery show and hide divs with next and previous button and can help you..

Read Also :  How to Clear Form Data jQuery