CODEWITHSUNDEEP
jquery
Naresh Kallamadi
Naresh Kallamadi

Reputation: 163

handling the tabs in a div with next and previous

I want show only 4 <li> s in div if li s are exceed then I want show next and previous arrow marks.

Here I am displaying litags in horizontally within the ul tag and I provided a border for each name and I connected li to li hr tag that is also in li tag.

And here my code is: 

                  <html>
                   <div id="parentDiv" width="60%">
                   <ul id="progressbar">

        <li class="active" >
                 <div class="childformNames"> 
                    basic info
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames "> 
                    Personal details
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Address Info
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Sports Info
                </div>
        </li>

        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Village Info
                </div>
        </li>

        </ul>
        </div>


                     <html>

Upvotes: 0

Views: 50

Answers (1)

aelor
aelor

Reputation: 11126

You can use jquery something like this to add a next button on every 4 elements. I have added div first, second and third respectively to the the parent div to be able to navigate using next and back.

fiddle here : http://jsfiddle.net/exgFT/1/

$(document).ready(function() {
  $("#second").hide();
  $("#third").hide();
  $("#prev").hide();
    $("#next").on('click', function() {
        if(!$("#second").is(":visible"))
       {
        $("#second").show();
        $("#first").hide();
        $("#prev").show();
       }
           else 
           {
               $("#third").show();
               $("#second").hide();
               $("#prev").show();
           }
    });

    $("#prev").on('click', function() {
        if(!$("#second").is(":visible"))
       {
        $("#third").hide();
        $("#second").show();
       }
           else 
           {
               $("#first").show();
               $("#second").hide();
               $("#prev").hide();
           }
    });
});

I know it looks ugly but thats all I could come up with.

Cheers !

Upvotes: 1

Related Questions