Search code examples
javascriptjqueryhtmlprestashop-1.6

How to hide sub-pages using jQuery?

I have a shopping cart page which contain four sub pages (Shopping Bag, Contact information, Shipping Method, Payment Method) which looks like this:

enter image description here

A user can navigate through like normal navigation, so I want this nav to be hidden in a shopping cart in general and show only when user goes to the next step in cart process.

Note: I am using hash to navigate thorough this navs

Here is nav html:

<div class="box-steps">
    <ul class="nav nav-tabs bs-wizard" style="border-bottom:0;" data-tabs="tabs">
        <li class="bs-wizard-step active">
            <a href="#box-order-one" id="step-one" data-toggle="tab">{l s='Koszyk' mod='threepagecheckout'}</a>
               <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">
        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-two" data-toggle="tab">{l s='Dane kontaktowe' mod='threepagecheckout'}</a>
            <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">

        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-three" data-toggle="tab">{l s='Dostawa' mod='threepagecheckout'}</a>
            <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">

        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-four" data-toggle="tab">{l s='Sposób płatności' mod='threepagecheckout'}</a>

        </li>
        <li class="stretch"></li>
    </ul><!-- end Box header right -->
</div>
<!-- end Box Header steps -->

Here is JS I have so far:

function hideNavbar() {
    if (window.location.hash == "#box-order-one") {
        $('.bs-wizard').hide();
    } else {
        $('.bs-wizard').show();
    }

}
function linkBackToBoxOne() {
    $('#step-one').click(function () {
        window.location.hash = "#box-order-one";
        $('.bs-wizard').hide();
    });
}

For reference: to navigate to the main shopping cart I use this link 

http://localhost:8080/index.php?controller=order-opc

which displays orders and navs in general, I want navs to be hidden immediately when visiting this page.

My method hides navs only when I visit this links 

http://localhost:8080/index.php?controller=order-opc#box-order-one
http://localhost:8080/index.php?controller=order-opc#box-order-two
http://localhost:8080/index.php?controller=order-opc#box-order-three
http://localhost:8080/index.php?controller=order-opc#box-order-four

Googled almost 3hrs nothing worked please I need your help :(

Solution

  • something like this?!

    function hideNavbar() {
//start hiding all steps
$('.bs-wizard-step').hide();

if (window.location.hash == "#box-order-one") {
    $( "#box-order-one" )
        .prevUntil( "li" )
            $('.bs-wizard-step').show();
}

    }

    https://api.jquery.com/nextUntil/

    of course: id="" should be in < li> tags... but that's the way