Search code examples
jquerymedia-querieszurb-foundationzurb-foundation-5

How to hide a div on mobile but make it visible with jQuery

I have a project with ZURB Foundation 5 and jQuery.

Just for mobile users, I have a situation, where I want a <div> to be hidden on the page load, but it should become visible when the user clicks on an element. Note that the specified element must be visible for non mobile users.

Tried 

<div id="inithidden" class="show-for-medium-up">contents of the hidden div</div>

and 

<a href="#/" onclick="$('#inithidden').toggle(); return false;">Click to show the hidden div</a>

but it does not work.

Tried also the visible-for-medium-up class on the #inithidden without any luck.

Is there a way to accomplish this without the use of javascript?

Solution

  • Note: You say you want jQuery in your answer, and "without the use of javascript" --- but jQuery is a JS library.

    If #inithidden is hidden display:none on page load, then you can change the onclick in the second line of code to:

    $('#inithidden').show();

    What your code is doing is simply creating a jQuery object for $("#inithidden"), but not doing anything with it. Use show() to change display to block.

    EDIT Looking at your comment, if you are just asking how to set it to hidden by default, you can either add the style:

    div#inithidden { display: none; }

    to your CSS, or you can add the style attribute to your <div> like so:

    <div style="display: none;" id="inithidden" class="show-for-medium-up">contents of the hidden div</div>

    EDIT 2: Seeing your second comment, you can do this through CSS's @media rule, like so:

    @media screen and (max-width: 750px) {
    div#inithidden { display: none; }
}