You must Sign In to post a response.
  • Category: JQuery

    Show/Hide tab using Jquery CSS

    Hi Friends,

    I have done jquery css show/hide tab but i am facing one problem to reselect based on user button click action.Cancel means need to do tab selection Home and search means need to do selection Serach tab.

    <script type="text/javascript">

    $(document).ready(function () {

    $("ul#tabs li").click(function (e) {
    if (!$(this).hasClass("active")) {
    $("ul#tabs li.active").removeClass("active");
    $(this).addClass("active");
    }
    });


    });

    <div id="divMenuTab">
    <ul id="tabs">
    <li class="active"><a href="javascript:;" id="aTabDocuments" > <span></span>Home</a></li>
    <li><a href="javascript:;" id="aTabSearch"><span></span>Search</a></li>

    </ul>
    </div>

    <div id="divSearchTab">
    <input type="button" value="Cancel" id="btnSearchCancel" name="btnSearchCancel" class="btnPrimary" style="width: 60px;" onclick="return ShowHideTab('Cancel');"/>
    <input type="submit" class="btnPrimary" value="Search" id="btnSearch" name="btnSearch" onclick="return ShowHideTab('sEARCH');"/>
    </div>

    Thanks,
    Krishna.K
  • #763263
    Hello Krishnasamy,

    You can refer the below code :

    <ul id="ul-menu-list">
    <li id="tabone">Home</li>
    <li id="tabtwo">About Us</li>
    <li id="tabthree">Contact Us</li>
    </ul>
    <di id="box-one" class="box">Tab1</di>
    <di id="box-two" class="box">Tab2</di>
    <di id="box-three" class="box">Tab3</di>

    $(document).ready(function(){
    $("#ul-menu-list li").click(function () {
    $('.box').hide().eq($(this).index()).show();
    });
    });


    Hope this will help you.

    Regards,
    Nirav Lalan
    DNS Gold Member
    "Failure is the path of least persistence"

  • #763345
    you can try the hide/show using the JQuery

    $(#Control').hide()
    $(#Control').show()

    By Nathan
    Direction is important than speed


Sign In to post your comments