CODEWITHSUNDEEP
javascripttwitter-bootstrap
user7538869
user7538869

Reputation:

Bootstrap collapse after set height

What I'm trying to achieve is relatively simple after a set height I'm looking to collapse a div using Bootstrap default attributes. Below I have written the javascript to trigger after a set height but what I'm unsure on is how to trigger the collapse with the id of #more.

function testScroll(ev) {

  if (window.pageYOffset > 1100) alert('User has scrolled at least 400 px!');
}
<div id="more" class="collapse">test</div>

Upvotes: 1

Views: 388

Answers (2)

Trishant Pahwa
Trishant Pahwa

Reputation: 2972

You can use the collapse function as defined in the bootstrap docs, by providing it the element id. You can also read more about it here.

function testScroll(ev){
    if(window.pageYOffset>1100) {
      alert('User has scrolled at least 400 px!');
      $('more').collapse('hide');
    } else {
      alert('User has not scrolled at least 400 px!');
      $('more').collapse('show');
    }
}


<div id="more" class="collapse">test</div>

Upvotes: 1

Ivan
Ivan

Reputation: 40728

If I understand you don't know how to select and change the class of the item #more

var collapse = function() {

  // select the element that has the id #more
  var element = document.getElementById('more');

  // now you can, for exemple change its class
  // that's where you can apply a different css class to collapse the div
  element.setAttribute('class','anotherClass');

}

Upvotes: 0

Related Questions