Develop Reference

Avoid Materialize nav bar from collapsing

Currently I am using materialize navbar and for the most part it work perfectly.
<div className="navbar-fixed fadeInDown animated">
<nav>
<div className="nav-wrapper">
...
</div>
</nav>
</div>
The thing is, it has an automatic collapsing behavior and for that reason I removed the id="nav-mobile".
It still collapses I think because it gets the width change events.
How do I make it so that it just changes the width without collapsing eventually?

As per the documentation, remove the button-collapse from your navbar and remove the initialization code: $(".button-collapse").sideNav();

Bootstrap Collapse Accordion Hover is not consistent

I'm working on creating a accordion that collapses/opens when the user hover's their mouse over the title of the accordion. The code I have so far works to some degree. The problem is that the accordion always opens when the mouse enters but is sometimes really inconsistent in closing (especially if the user moves their mouse very fast).
Here is a link to the website http://infotree.co.uk/ (the accordion is on the left) to visualize the problem - move mouse fast over the left accordion.
And here is my code for just one of the accordion tabs in the html doc:
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script to go with it:
$(document).ready(function() {
$("#headOne1").hover(function() {
$('#collapseOne1').collapse('show');
}, function() {
$('#collapseOne1').collapse('hide');
}
);
});

Going through the previous accordion question you mentioned (Bootstrap Collapse accordion on hover) I found one person's answer relating to the problem I was having which made me realize the exact cause.
The problem is to do with the animation timing, so if you leave the collapse area BEFORE the collapse animation is finish jquery never runs the collapse function. The solution is to use queue and dequeue methods to make sure all the functions run properly and in the correct order.
Here is the HTML code for one tab:
<div class="panel panel-default">
Search
<div id="sidebarContent1" class="panel-collapse collapse">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script for the respective tab:
$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {
content1.queue('collapsequeue',function(){
content1.collapse('show');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
button1.mouseleave(function() {
content1.queue('collapsequeue',function(){
content1.collapse('hide');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
content1.dequeue("collapsequeue");
});
});
The .queue() names a queue AS WELL as adds functions to a queue, .dequeue() simply RUNS the queue. The code isn't completely perfect as it goes against DRY coding (much like the response I found in Bootstrap Collapse accordion on hover) - this is because I am not able to use the href tag in a element since I need that so that I can link to different webpages rather than the div element containing the hidden content.
Any idea on making the code shorter/efficient? I have to repeat the JS for every tab and I feel like there is probably a better way to do this that what I have come up with.

This question has been answered before: Bootstrap Collapse accordion on hover
If you don't want/need the fancy animation, you could also use pure CSS:
https://jsfiddle.net/vvu5ozh1/4/
With CSS transitions you could even do the animation, but that would be a bit more complicated.
<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>
<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>
.panel:hover .content {
display:block;
}
.content {
display: none;
}

jQuery ui accordion active class

I have a simple accordion built on the jQuery UI plug-in. The plug-in works as it should but I'd like to add a class onto the clickable element (that opens/closes the content) so that I can style it differently.
Here's a crude but functional CodePen version of the functionality:
http://codepen.io/moy/pen/dXObjX
This is the structure of my mark-up:
<div class="mount accordion">
<div class="hgroup accordion__toggle">
<h3 class="hgroup__title">Course 1</h3>
</div>
<div class="accordion__content">
<!-- Hidden content in here -->
</div>
</div>
And my javascript:
$(document).ready(function($) {
$('.accordion').find('.accordion__toggle').click(function(){
// Expand or collapse this panel
$(this).next('.accordion__content').slideToggle(200);
});
});
Currently all panels are open my default unless a class of .hidden is added to .accordion__content.
Thanks, hope someone can help with this!

Try something like below:
$(document).ready(function($) {
$('.accordion').find('.accordion__toggle').click(function(){
// Expand or collapse this panel
$(this).next('.accordion__content').slideToggle(200);
//toggle class
$(this).toggleClass('classname')
});
});

jQuery slidedown menu trigger makes menu slideup too quickly

I have the following html:
<div class="col-sm-12" id='dropdown_menu_group'>
<div id='dropdown_library_menu'>
<div class="row" id='dropdown_menu_row'>
<div class="col-sm-2">
<a class='button-text btn' id='library_button' href="{{pathFor 'library'}}">my library</a>
</div>
<div class='col-sm-2 col-sm-pull-1' id='google_drive_text'>
GOOGLE DRIVE
</div>
<div class="col-sm-2" id='settings_button'></div>
</div>
</div>
<div id='dropdown_library_menu_border'></div>
</div>
my id='dropdown_library_menu' is hidden by default, and the div below it <div id='dropdown_library_menu_border'></div> has opacity of 0, so that when it is scrolled over, it makes the id='dropdown_library_menu' slide down. The issue is, though, that <div id='dropdown_library_menu_border'></div> is still there when the menu slides down, and thus, when I scroll over the opacity 0 div that triggers the slideDown (inside of the menu, at this point), it tricks my jQuery into thinking this condition is met:
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp('slow');
}
Because technically, I am mousing out of the dropdown menu and into the dropdown menu trigger.
I want to make the blank div move to the bottom of the menu when the slideDown is triggered, but setting position relative on the parent and position absolute on the children totally messes up my webpage.

You can make it even slower,
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp(3000); // Slide up in 3 seconds,
}

slideToggle equivlanet for when a page is loaded

I am using jQuery to hide some content in collapsible panels, to do this I am using the following mark up and script:
HTML
<div class="trigger">Collapsible Header 1 - Click to toggle</div>
<div class="panel">
content 1
</div>
<div class="trigger">Collapsible Header 2 - Click to toggle</div>
<div class="panel">
content 2
</div>
jQuery:
$(document).ready(function() {
$(".trigger").click(function(){
$(this).next(".panel").slideToggle("medium");
});
});
A fiddle of it here:
http://jsfiddle.net/LkTf8/1/
This works great, however I am trying to start with the panels collapsed. Currently, they are open, not closed. What is the best approach to start with the panels collapsed?

set .panel to display: none
FIDDLE