hide parts of site on mobile devces

Question

I have the following snippet of code and I want only show the headers on mobile unless the header is clicked. Tried a few things but nothing works.

相关标签:

Answer 1

I believe this does what you want. You have to use some jQuery.

First we have to add an identifier so that the code knows what parts to hide. So I've added a CSS class to the parent div of each block. The class is called custom-hide. So each parent div now looks like this:

<div class="col-sm-2 custom-hide">

Then you have to add some CSS that targets these divs. So I wrote the following:

.custom-hide h5 { 
    display: none; 
}

Great! The h5s are hidden. But now they are hidden on everything! So we have to add a media query so it only happens on mobiles. So I did the following:

@media only screen and (max-device-width: 736px) {
    .custom-hide h5 { 
        display: none; 
    }
}

This means the CSS is only applied if the screen width is 736 pixels or less, perfect for mobiles.

Now for the jQuery. What this code does is adds or removes the class custom-show to the div when you click on it. And as the custom-show class has the !important bit on it, it overrides the other class, and displays the h5, but only the h5 of the one you clicked.

I haven't included the media query in my snippet, because otherwise the code would only work on mobiles (which is what you want) but snippets only work on desktops.

$('div.custom-hide').on('click', function() {
  $(this).toggleClass("custom-show");
});

.custom-hide h5 {
  display: none;
}
.custom-show h5 {
  display: block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid bottom-blue">

  <div class="row">
    <div class="col-sm-2 custom-hide">
      <h3><strong>Executive hire</strong></h3>
      <h5>Mercedes<br>Bently<br>Rolls Royce<br>Jaguar<br>Range Rover<br>BMW<br>Audi</h5>
    </div>
    <div class="col-sm-2 custom-hide">
      <h3>Coach Hire</h3>
      <h5>24 Seater coach<br />29 Seater coach<br />33 Seater coach<br />49 Seater coach<br />51 Seater coach<br />53 Seater coach<br />61 Seater coach<br />87 Seater coach</h5>
    </div>
    <div class="col-sm-2 custom-hide">
      <h3>Limo Hire</h3>
      <h5>White Limo<br />Black Limo<br />Pink Limo<br />Hummer Limo<br />Fire Engine Limo<br />Jeep &amp; Novelty Limo</h5>
    </div>

    <div class="col-sm-2 custom-hide">
      <h3>Minibus Hire</h3>
      <h5>10 Seater minibus<br />11 Seater minibus<br />12 Seater minibus<br />14 Seater minibus<br />14 Seater minibus<br />15 Seater minibus<br />16 Seater minibus</h5>
    </div>

    <div class="col-sm-2 custom-hide">
      <h3>Services</h3>
      <h5>Private & Corporate Travel<br />Local & National Journeys<br />Airport Transfers<br />Sporting Events<br />Weddings<br />Theatre Trips<br />Stag & Hen Parties</h5>
    </div>

    <div class="col-sm-2">
      <h3>AREAS COVERED</h3>
    </div>
  </div>
</div>

Answer 2

Bootstrap has classes you can use to show or hide content at certain breakpoints: hidden-xs, hidden-sm, etc. You'd probably want hidden-xs.

You can then hav ea click handler on your h3 elements that toggles that class on the h5. This will be a no-op on larger screens, but on smaller ones it will show/hide the element.

In this example I use jQuery for the JavaScript part (using event delegation), but that's a detail; the point is the concepts and the responsive classes provided by Bootstrap:

$(".container-fluid").on("click", "h3", function() {
  $(this).nextAll("h5").first().toggleClass("hidden-xs");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bottom-blue">

  <div class="row">
    <div class="col-sm-2">
      <h3><strong>Executive hire</strong></h3>
      <h5 class="hidden-xs">Mercedes<br>Bently<br>Rolls Royce<br>Jaguar<br>Range Rover<br>BMW<br>Audi</h5>
    </div>
    <div class="col-sm-2">
      <h3>Coach Hire</h3>
      <h5 class="hidden-xs">24 Seater coach<br />29 Seater coach<br />33 Seater coach<br />49 Seater coach<br />51 Seater coach<br />53 Seater coach<br />61 Seater coach<br />87 Seater coach</h5>
    </div>
    <div class="col-sm-2">
      <h3>Limo Hire</h3>
      <h5 class="hidden-xs">White Limo<br />Black Limo<br />Pink Limo<br />Hummer Limo<br />Fire Engine Limo<br />Jeep &amp; Novelty Limo</h5>
    </div>

    <div class="col-sm-2">
      <h3>Minibus Hire</h3>
      <h5 class="hidden-xs">10 Seater minibus<br />11 Seater minibus<br />12 Seater minibus<br />14 Seater minibus<br />14 Seater minibus<br />15 Seater minibus<br />16 Seater minibus</h5>
    </div>

    <div class="col-sm-2">
      <h3>Services</h3>
      <h5 class="hidden-xs">Private & Corporate Travel<br />Local & National Journeys<br />Airport Transfers<br />Sporting Events<br />Weddings<br />Theatre Trips<br />Stag & Hen Parties</h5>
    </div>

    <div class="col-sm-2">
      <h3>AREAS COVERED</h3>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>