CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3responsive-designresponsive
poncho
poncho

Reputation: 1150

bootstrap visible-*-block and jquery toggle() conflict - Trying to hide/show toggle a div

I'm using bootstrap and jquery on my website. I have 2 different views depending on window size, so I'm making use of col-md-, col-sm- and visible--block, hidden- etc.

I've ran into a problem where I want some divs to start as "display: none" until a "see more" button is pressed and then disappear again when clicked again. This works fine using the jQuery slideToggle() function normally. However, now that I'm using "visible-xs-block" and "visible-md-block" I'm running into an issue.

.visible-xs-block defines itself as:

@media (max-width: 991px) and (min-width: 768px)
    .visible-sm-block {
        display: block!important;
 }

My hidden divs have the class "hideDiv" which is defined as follows:

.hideDivs {
    display: none;
}

So, they start out hidden and then when the "see more" button is pressed, that class gets toggled off. This is fine until I try and hide them again with slideToggle(), the page slides up and the divs disappear completely for (I guess?) 1 frame but then they reappear because .visible-xs-block kicks in and it's !important attribute kicks in.

This code was working fine until I added these new visible-*-block classes etc to be able to show different things.

I have tried adding !important to my own class but then this always overrides .visible-xs-block and so the divs never get shown.

Here is a fiddle showing it conflicting and working incorrectly - Just pull the "browser" section of the window larger and smaller and use the "see more" button to see my problem.

I've got to a point where I've just confused myself so much, I'm not sure what a good solution would be. Any help would be much appreciated.

Thanks for your time!

Upvotes: 1

Views: 914

Answers (1)

SGventra
SGventra

Reputation: 105

.visible-*-block { display:block !important } is showing the element under it no matter what. so we need to override this with display: none !important. there are a lot of ways to do this, i'll give you an easy and lazy one base on your code haha! using addclass/removeclass to trigger display:none !important.

CSS

.hidden {
  display: none !important;
}

JS

$('.see-more-button').click(function() {
 event.preventDefault();
 if($('.hideDiv').is(":visible")) {
  $('.hideDiv').addClass("hidden");
  $('.see-more-button').text("+ See more");
 }
 else {
  $('.hideDiv').removeClass("hidden").show();
  $('.see-more-button').text("- See less"); 
 }
});

Upvotes: 1

Related Questions