I am dealing with a strange problem.
I want to use a tabular menu inside the accordion.
Now the problem is that somehow the html gets scrambled inside the accordion.
I have made a fiddle to demonstrate this problem:
jsfiddle
is just do a standard:
$(document).ready(function() {
var accordion = $('.ui.accordion');
$(accordion).accordion();
$('.tabular.menu .item').tab();
})
The problem occurs when you toggle the first tab or open any other tab.
On first initialization there is nothing wrong en everything works fine.
I hope anyone can help me out with this
Thanks for your help guys, really appreciate it!
The fix is given on the github repo
$('.ui.accordion').accordion({
animateChildren: false
})
Related
on my site my hanburger menu just stopped working and no longer opens, it also adds an # to the URL when you click on the mobile version of it?
Not sure why it just all the sudden stopped working but I tried disabling all the plugins and turned them on one by one.
Tried removing the code I entered a couple weeks back.
Deleted the recent CSS code I added to make mobile version show properly
I also removed any custom css that could affect this hamburger menu and no luck.
Anyone have an idea why this is not working right now and what my next few steps would be to fix it?
Here is the site: https://rocketpilots.com the hamburger menu used to work fine yesterday and then woke up today to it not working anymore. Anyone have a fix for this issue, it is not plugins or custom css because tried both those options and no luck? I am pretty sure it is a javascipt issue just not sure exactly what?
Code for header.php:
<div class="fusion-header-sticky-height"></div>
<div class="fusion-header">
<div class="fusion-row">
<?php avada_logo(); ?>
<?php avada_main_menu(); ?>
<div class="logo_text"><h3 style="font-size:11px !important;color:#1592CE !important;"><a style="font-size:11px !important;color:#1592CE !important;" href="https://rocketpilots.com">Digital Marketing</a></h3></div>
Free Consultation
Please any assistance would be greatly appreciated, just cannot figure out why Hamburger menu stopped working, please let me know. Thanks!
Remove this code from inside the <script> tag:
jQuery(document).ready(function () {
jQuery('p strong')[0].nextSibling.remove('.');
});
This is causing the error seen in the console; whatever it's attempting to target doesn't exist in the document. This snippet also has a jQuery(document).ready(){} contained inside of another one, which is redundant.
Having some trouble with something hoping someone may be able to help out.
Below is a link for tabs, and accordion (both work perfect separately)
Tabs
jsfiddle.net/31oftamq/6/
Accordion
jsfiddle.net/xLh6k5fm/2/
When I put the accordion in the content area for one of the tabs, the accordion does not appear whatsoever when I run it.
Anyone know what the issue could be? Help will be much appreciated.
Thank you! :)
Because you hide it with this:
$('.tabs-stage div').hide();
Change it to:
$('.tabs-stage div[id^=tab]').hide();
Check full code here: http://jsfiddle.net/31oftamq/9/
I'm sure this issue is the result of conflicting code, but I cant seem to find it. I've removed all of the page except for the menu bar area. I'd would appreciate any help in getting the drop down to appear. It may be better to just recreate the top portion of the page at this point, but I thought I would check here first in case its just an oversight.
Thanks in advance.
<https://jsfiddle.net/cxLap188/#&togetherjs=GqBl9GC4UQ>
In that jsfiddle you have 2 div with id="bs-example-navbar-collapse-1", so the navbar-toggle works with the first it finds, just delete the one you dont need (the one after that <h3 class="hedLogo"> I guess).
I am having an issue with foundation 4 section tabs. I copy pasted the example code to my local and tested it and it doesnt show up.
I also modified it and added some height elements to make it display properly but still I can only view on tab and clicking it doesnt actually open up the content.
I have included jquery foundation.css and foundation.min.js and also zepto.js without any luck.
If anyone could tell me what i might be doing wrong or if there is an issue with the framework that would be great.
Thanks.
Please close this.
I fixed the problem by adding a foundation at document load. :)
Cheers hope this helps someone in need.
$(document).foundation(); Thats the code I added right at the start of document.ready.
Here's a crude sample of what I'm dealing with: http://jsfiddle.net/dX2ux/1/
A client's in-house developed CMS dynamically creates menus using this HTML structure. It also comes with the jQuery script that is shown on the sample.
I want to edit the script so that it closes it's sibling's open menus before it toggles itself open. The show class is has to be toggled as well.
So far, I've come up with this: http://jsfiddle.net/dX2ux/2/
But if you play with it, it screws up when you click one of the sub menus.
Can anyone shed some light on how I might achieve the behavior I'm aiming for? Also, is this the best way to do it? Am I overthinking this?
Any help is appreciated. Thank you.
Not really sure if this is the "best" way per se, but with that kind of markup, this solution should work:
$('.toggle-menu').on('click',function(e){
e.preventDefault();
$(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
$(this).toggleClass('show').next().slideToggle();
});
Edited your fiddle to show the effect: http://jsfiddle.net/dX2ux/3/