CODEWITHSUNDEEP
jquerycssmedia-queries
user1554264
user1554264

Reputation: 1224

Issue with Jquery .toggle method applied to element and media queries

I have created the following website (http://www.bestcastleintown.co.uk/#packages) and have encountered the following issue.

[Steps to reproduce]

  1. First the user navigates to Packages where they will see "STANDARD", "PROFESSIONAL" AND "ULTIMATE"

  2. Resize the browser window to that of a small device (must be below 768px)

  3. Click the downward facing chevron in the black package box to show the details

  4. Click the downward facing chevron in the black packages box to hide the details

  5. ENSURE the package details are hidden after 2 clicks on the chevron at a small browser width and resize the browser window to full screen

Essentially the user has clicked the chevron icon .price-plan-arrow which only appears on devices with a resolution of less than 768px. When the chevron is clicked jQuery has then set the <div id="plan-1"> to be in a hidden state. 

  $( "#arrow-1" ).click(function() {
    $( "#plan-1" ).slideToggle( "slow" );
  });

  $( "#arrow-2" ).click(function() {
    $( "#plan-2" ).slideToggle( "slow" );
  });

  $( "#arrow-3" ).click(function() {
    $( "#plan-3" ).slideToggle( "slow" );
  });
});

When the broswer window is enlarged the chevron is no longer present (as it only displays on devices below 768px width) and <div id="plan-1"> is still set to hidden. Meaning the user has no way to make the content appear again without resizing the browser.

Is there anyway to resolve this, for example a dynamic script/media query that says "If the browser window is 769px then ensure that the display property of .plan is set to display:block;?

It seems jQuery is currently overwriting this essential rule in my stylesheet:

@media (min-width:769px) {
.plan {
  display: block;
}

[Resulting issue]

enter image description here

Upvotes: 0

Views: 278

Answers (1)

Popnoodles
Popnoodles

Reputation: 28419

Is there anyway to resolve this, for example a dynamic script/media query that says "If the browser window is 769px then ensure that the display property of .plan is set to display:block;?

Try this first to see if important is enough to maintain it

@media (min-width:769px) {
.plan {
  display: block !important;
}

Otherwise you'll have to force it with JS

$(window).on('resize', function(){
    if ($(this).width() >= 769) $('.plan').css({display: 'block'}); // or .show();
});

Upvotes: 3

Related Questions