CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Robert
Robert

Reputation: 812

Bootstrap toggle footer

i try to make footer columns to be hidden on mobile platforms, and when press on title to open. Is there any way to make this with bootstrap without add any javascript?

My Code is:

<div class="col-sm-7 five-three">
<div class="row">
    <div class="col-sm-4">
        <h4>Company</h4>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </div>
    <div class="col-sm-4">
        <h4>Why buy from us</h4>
        <ul>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">Secure Shopping</a></li>
        </ul>
    </div>  
    <div class="col-sm-4">
        <h4>My account</h4>
        <ul>
            <li><a href="{{store url='customer/account/login/'}}">Sign In</a></li>
            <li><a href="{{store url='checkout/cart/'}}">View Cart</a></li>
        </ul>
    </div>
</div>

Upvotes: 2

Views: 1033

Answers (3)

Riddler
Riddler

Reputation: 576

If by Bootstrap alone, you mean CSS alone i can give you a solution that i kind of used a while ago

https://jsfiddle.net/arunzo/ybgayvL8/

Adding tabindex to the h4 tags with some css did it, But this could be insufficient for crossbrowser dependancy and stuff , use with caution.

    <div class="col-sm-7 five-three">
<div class="row">
    <div class="col-sm-4">
        <h4 tabindex="0">Company</h4>
        <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </div>
    <div class="col-sm-4" >
        <h4 tabindex="0">Why buy from us</h4>
        <ul>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">Secure Shopping</a></li>
        </ul>
    </div>  
    <div class="col-sm-4">
        <h4 tabindex="0">My account</h4>
        <ul>
            <li><a href="{{store url='customer/account/login/'}}">Sign In</a></li>
            <li><a href="{{store url='checkout/cart/'}}">View Cart</a></li>
        </ul>
    </div>
</div>

and the css (you might want to put this inside your media query and five-three is for idenntification sakes consider adding a more semantic class name):

    @media screen and (max-width: 768px) {
    .five-three ul {
        display:none;
    }
    .five-three h4:focus + ul {
        display:block;
    }
    }

Upvotes: 1

N&#235;phylhim
N&#235;phylhim

Reputation: 11

you can use media queries (in css) to hide your columns with a new rule you define. here an exemple : html :

<div class="row">
    <div class="col-sm-4 hide"> <!-- Pls see that I add a style name : hide -->
        <ul>
            <li><a href="#">Something</a></li>
            <li><a href="#">Another thing</a></li>
        </ul>
    </div>
</div>

css (new stylesheet):

@media screen and (max-width: 768px) {
   /*I take max-width: 768px because of bootstrap : sm is for 768px too*/
  .hide {
    display: none !important; /*You don't need !important if you load this stylesheet after you main one*/
  }
}

Upvotes: 1

meskobalazs
meskobalazs

Reputation: 16041

You might add the hidden-xs and hidden-sm classes to the footer, so it won't show up on screens narrower than 963px.

Upvotes: 1

Related Questions