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:

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;
}

  

    

      
Executive hire
      
Mercedes
Bently
Rolls Royce
Jaguar
Range Rover
BMW
Audi
    
    

      
Coach Hire
      
24 Seater coach
29 Seater coach
33 Seater coach
49 Seater coach
51 Seater coach
53 Seater coach
61 Seater coach
87 Seater coach
    
    

      
Limo Hire
      
White Limo
Black Limo
Pink Limo
Hummer Limo
Fire Engine Limo
Jeep & Novelty Limo
    

    

      
Minibus Hire
      
10 Seater minibus
11 Seater minibus
12 Seater minibus
14 Seater minibus
14 Seater minibus
15 Seater minibus
16 Seater minibus
    

    

      
Services
      
Private & Corporate Travel
Local & National Journeys
Airport Transfers
Sporting Events
Weddings
Theatre Trips
Stag & Hen Parties
    

    

      
AREAS COVERED