CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designmedia-queries
user3132858
user3132858

Reputation: 667

jQuery show a hidden DIV based on CSS element and slideToggle() state property

I need some support into finishing a jQuery function I am struggling with for quite some time.

I have an HTML content in a div with classes mnu2 mob_hide. This content should be always visible for page width more than 500px and hidden if the width is less that 500px. I am doing this with CSS media queries and it works quite ok.

I also have a slideToggle() function that should show/hide the HTML content for page width less then 500px based on user demand.

The problem is the following - for page width less than 500px, if the content is shown and then hidden again via slideToggle() and the user resizes the screen at width larger than 500px, the HTML content is not shown again.

I assume the CSS rule in the slideToggle() function overrides the CSS media rule and the content remains hidden. And I need to fix this.

The current code is provided here: JSFIDDLE

Now the first solution that I thought of: An additional jquery function can be added to check screen width and display the HTML content for page width larger than 500px. Problem with this code is that once the function triggers the content remains visible even for page width less than 500px. The code is below, I haven't added in the JSFIDDLE on purpose:

var filtermshow   =   jQuery.noConflict();

filtermshow(window).on('resize', function(){

    var win = filtermshow(this); //this = window
    if (win.width() >= 500) { 
        filtermshow('.mob_hide').css({
        display: 'block',
        });
    }               
});

IS there a way to make the HTML content hidden again for width less that 500px, either via jQuery or CSS and in the same time keep the slideToggle() functionality? Any eedback will be appreciated!

Upvotes: 1

Views: 582

Answers (1)

Philipp
Philipp

Reputation: 11361

I think for this scenario you can find a solution without using javascript:

Use a hidden checkbox for the toggle element and then apply these style rules:

  1. For mobile devices show/hide the content based on the checkbox state.
  2. For desktop size always show the content.

This example is based on your code:

<div>
    <input type="checkbox" id="menu2" />
    <label class="tri2" for="menu2"></label>
    <div class="content">
    ...
    </div>
</div>

<style>
#menu2 { display:none; } /* always hide the checkbox */
.content { overflow: hidden; }
.tri2 {
    background: #000;
    display: inline-block;
    height: 51px;
    width: 50px;
}

/* The mobile version */
#menu2 ~ .content { height: 0; } /* hidden when unchecked */
#menu2:checked ~ .content { height: auto; } /* displayed when checked */


/* The desktop version */
@media only screen and (min-width:501px) {
    .tri2 { display:none; } /* hide the mobile toggle button */
    #menu2 ~ .content{ display: block; height: auto; } /* always display content */
}
</style>

Here is the working jsfiddle code to test it: http://jsfiddle.net/kbm3t2s4/2/

Upvotes: 2

Related Questions