I'm not entirely sure this is what you want, and I have no way to check if the code works, so take it for what it is. $(".accordion-section-content").mouseout(function (event) { if ($(event.target).hasClass("open")) { close_accordion_section(); } }); Here's an explanation of what's going on. Line: When you mouseout on elements with...

You need to stop event propagation to child elements. Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. $('select').click(function(e){ e.stopPropagation(); }); ...

here is a working code : $(document).ready(function(){ $(".accordion-toggle").click(function() { if($(this).next("div").is(":visible")){ $(this).next("div").slideUp("slow"); $(this).children().toggleClass("fa-angle-up fa-angle-down"); } else { $(".accordion-toggle").next("div").slideUp("slow"); $(".accordion-toggle i").attr("class", "fa fa-angle-down"); $(this).next("div").slideDown("slow"); $(this).children().toggleClass("fa-angle-up fa-angle-down"); } }); }); You need to close all the tab before open the one who is clicked. Have a good...

For the first part, the issue is that your list's height is 0. Putting something like the following in the updateList function fixes that issue. if (thisOL.children().length == 0) { thisOL.height(10); } FIDDLE: http://jsfiddle.net/5V5HU/14/...

Multiple <title> tags are not allowed, but you could modify the document.title property using javascript. For example, this would work: $('#animals, #reptiles, #snakes, #how-do-you-catch-a-snake').click(function(e) { //assuming selected tabs get a .selected class if (!$(this).hasClass('selected')) { $(this).addClass('selected'); //Assuming you want to make the `<title>` the same as the tab's contents document.title...

Thank you for the help everyone. I know hundreds of you tried to help but after two attempts of asking the question, I have done it myself. I wish I wasn't a genius, but what is your loss is my gain. If you are remotely interested in how I solved...

From the code you have posted it should work so I can only assume it isn't including your scripts properly If the acc folder is in the root folder of your website you should consider changing your scripts and css to: <link rel="stylesheet" type="text/css" href="/acc/css/jquery-ui-style.css" /> <script type="text/javascript" src="/acc/js/jquery.js"></script> <script...

Your js only knows the current state of the dom when it runs. this means that when this code is run, it does not see any parent with the class sub-menu-active as this class is not set at the time. It will never actually run the code that you want...

here is my fiddle. refer to it All you needed to do was add display:inline-block to <a> element since it is inline element. https://jsfiddle.net/7hLzqoxe/5/ This was the main part that needed a change $('.accordion-modal > dt > a').click(function () { $(this).children('header').addClass('green'); $(this).parent().siblings().children('a').children('header').removeClass('green'); //$(this).parent().siblings().children('a').removeClass('green'); allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); updated JS...

Dont use slideToggle(), use slideUp() instead ;) SlideToggel will slide eveything that is up down and everything that is down up. You want everything to slide up so use slideUp() EDIT: I modified your jsfiddle, and got it working. When a user clicks the button 'show all' it will check...

Because all weeks share the same variable hour, expanding one heading will cause that same variable to be overwritten, modifying all panes' inner ng-repeat contents. Instead, you either need to make hour a property on each week object in weeks, or you need to have a separate object/map that stores...

I got some help from my boss on this one. Had to use the empty method $( '#accordion').empty();to empty out the contents of the accordion div just before my while loop. Also there really is no need for $('#accordion').accordion("refresh"); in my code.

Simply set a margin on collapse and expand: https://jsfiddle.net/5qrkze88/3/ First thing, not sure what your project is, but I think setting the #footer width to 100% will give you better results. Second thing, don't know why you set position to fixed, setting it to absolute will also improve your results....

Firstly, you need to use after() to add the new tab, as append() is placing it inside the existing tab structure, which is incorrect. Secondly, you also need to call refresh on the tabs to add the required styling and events. Try this: $(function () { $("#htabs-outer").tabs(); var $vtabs =...

The main difference between yours and the example is that he uses a template that is easy to clone and remove. You just add the <h3> and then the <div> with the content (no wrapper). To mimic what the example that you provide does, just add a small link to...

Try this. What you need to do is, move the scroll only after the Active slide's animation has been completed. slideDown accepts a function as a complete callback. So I moved your scroll code to this function. And to have some margin from top, 100 should be minus not added...

Okay after a lot of trial and error I finally got it to work. I found nothing too useful doing research on the web so I though I would try to help those that may come across this question. What I am about to share worked on my specific implementation,...

Your append string needs to be terminated with single quotes since you are using double quotes with it. Also you need to include Jquery library. If you are using the jquery accordion you also need to include the Jquery UI library. Also your html is a bit off, here is...

Your last two lines are attempting to find children of the 'h3' being clicked, but it has no children. The 'h3' is already selected, so these two lines should just use "$(this)": //here I want the selected section to have a down arrow $(this).removeClass("arrow-right"); $(this).addClass("arrow-down"); Unfortunately, fixing this still won't...

you can use $('#activePanel').outerHeight(true); if you have multiple accordions give all the same class and use .each(); $('.Panels').each(function(){ var actualHeight = $(this).outerHeight(true); console.log(actualHeight ); }); ...

You have set the click element to be .menu-desplegable > ul > li > a so only the direct child a is bound to that listener. You need to change your click element to .menu-desplegable > ul li a so that a nested ul li a can be clicked. Then...

So I've solved this with a bit of dirty script but doesn't feel like the "correct" way of doing it. $(".FormHeading").each(function () { $(this).nextUntil(".FormHeading").wrapAll('<div class="accordion-content" />'); }); If anyone has a better/cleaner method I'd love to know!...

jQuery UI depends on jQuery. In the working example you import jQuery then you import jQuery UI. In the non working example, you import jQuery UI, then you import an non-minified version of jQuery UI (don't do that, stick to one version), then you import jQuery, by which time it...