The goal here is to make a page responsive and mobile friendly.

I show an invoice with all its details when on a desktop. But when the viewport is reduced, the details are hidden and can be toggled (hide/unhide) on clicking/tapping.

So I have a trigger and a target class.

$('.trigger').click(function(){
    $('.target').toggleClass('hide');
})

This works as expected if I add the hide class to target in my markup. But I cannot do that as they should appear unless the user views the page at a small screen. I can set display: none in the media queries but that hides target for good.

What property of the target element should I modify so that it hides itself when the screen size is reduced and I can toggle its view with the hide class?

The goal here is to make a page responsive and mobile friendly.

I show an invoice with all its details when on a desktop. But when the viewport is reduced, the details are hidden and can be toggled (hide/unhide) on clicking/tapping.

So I have a trigger and a target class.

$('.trigger').click(function(){
    $('.target').toggleClass('hide');
})

This works as expected if I add the hide class to target in my markup. But I cannot do that as they should appear unless the user views the page at a small screen. I can set display: none in the media queries but that hides target for good.

What property of the target element should I modify so that it hides itself when the screen size is reduced and I can toggle its view with the hide class?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 10, 2015 at 9:40 SinsteinSinstein 9091111 silver badges4242 bronze badges 3

• Try to use resize() handler. In this handler you can check windows sizes – suvroc Commented Aug 10, 2015 at 9:45
• In your media query, set display:none; and via JS when the screen width is equal to the desired width, do .css({'display': 'block'}) – lshettyl Commented Aug 10, 2015 at 9:48
• Try using $('.target').toggle(); if all you want is to hide/show it. – gaynorvader Commented Aug 10, 2015 at 9:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This all depends on what you are doing:

You could use JavaScript to detect the width and add specfic classes on the toggle to display it.

$screenWidthCheck = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if ($screenWidthCheck > 1280) {
    $("#page-content").addClass('active');
}

You could then add an even to it.

$(window).resize(function() { 
    $screenWidthCheck = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if ($screenWidthCheck > 1280) {
        $("#page-content").addClass('active');
    }
});

A Javascript solution would be to add a hook to load and resize event handlers that would check the screen width and add/remove the class accordingly.

$(window).on("load resize", function() {
    //Assuming you consider anything >= 1240 as desktop
    $('.target').toggleClass('hide', $(window).width() < 1240);
});

A CSS solution:

@media all and (min-width: 1240px) {
    .target {
        display: block;
    }
}
@media all and (max-width: 1239px) {
    .target {
        display: none;
    }
}