Monday 24 August 2015

Show Hide divs using Next Previous Button using Jquery

Hello,

You want to Make Show And Hide Your div content using jquery. Next and Previous.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
        $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().show().prev().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().show().next().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:last").show();
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

show hide divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>

No comments:

Post a Comment

Thank You For Comment