I purchased a Wordpress accordion plugin that's an addon for the WPBakery Page Builder and the support has been less than helpful. What I would like is to have users click on the title once to open a panel and click on the title again to close the panel. I have all the panels closed by default when the page loads.
You can see the accordion here: Wordpress accordion plugin, it's about the 10th one down:
this is the accordion
The javascript that is being provided is:
jQuery(document).ready(function(){
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').click(function(){
if( jQuery(this).next().is(':hidden') ) {
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').removeClass('active').next().slideUp();
jQuery(this).toggleClass('active').next().slideDown();
}
return false;
});
});
If anyone can help me, I would greatly appreciate it.
They get the money and we should do support for free! :) you can do something like this:
JS
jQuery(document).ready(function(){
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').click(function(){
if( jQuery(this).next().is(':hidden') ) {
jQuery(this).toggleClass('active').next().slideDown();
} else {
jQuery(this).toggleClass('active').next().slideUp();
}
return false;
});
});
P.S: You want to make an accordion to act like tab widget. This line of code will make your widget accordion
jQuery('.uc_material_accordion .uc_trigger-{{uc_id}}').removeClass('active').next().slideUp();
Related
I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV
UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});
I'm trying to create an accordion able to expand multiple panels at once. I have tried to find it in the jQuery UI API, but I haven't yet found the proper way.
Please let me know if there is a way of doing this using jQuery UI accordion.
As others have noted, the Accordion widget does not have an API option to do this directly. However, if you must use the widget, it is possible to achieve this by using the beforeActivate event handler option to subvert and emulate the default behavior of the widget.
For example:
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
See a jsFiddle demo
You could write multiple accordions that are stacked and each accordion have only one panel. This way the panels could be individually toggled.
An accordion is, by definition, a set of expanding elements that toggle in a certain way. You don't want that. You just want a set of expanding elements. It's extremely easy to build that with jQuery. It often needs nothing more than this:
$('.my-heading-class').on('click', function() {
$(this).next('.my-content-class').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>
I was trying to use this slide out panel with Bootstrap, which give you the option to slide out from the right http://www.building58.com/examples/tabSlideOut.html . but it doesnt seem compatible. can someone recommend which slide out panel I can use that is compatible with bootstrap?
A bit of CSS and jQuery are enough to rebuild this function. Take a look at my jsfiddle.
jQuery Snippet
$('#opener').on('click', function() {
var panel = $('#slide-panel');
if (panel.hasClass("visible")) {
panel.removeClass('visible').animate({'margin-left':'-300px'});
} else {
panel.addClass('visible').animate({'margin-left':'0px'});
}
return false;
});
Full Example: http://jsfiddle.net/9Le8X/2/
So I'm working on a phonegap app using topcoat and implemented a fly out menu as seen here. I'm using this script to open/close the menu
$(function () {
var slideMenuButton = document.getElementById('slide-menu-button');
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
});
Now everything is working fine but what I want to add on is the ability to swipe to close the panel and to open it as well. I've seen touch library for jquery that seem to offer a solution (such as TouchSwipe) but I want to try to get this as close as possible to a 1:1 touch movement interaction.
Anyone have an idea on what direction I should go in to get this going or have any ideas? Any help is appreciated.
Found this and with some renaming of classes, I got a touch slide out menu that works how I want. Its called Bamboo.js
Here's a demo of it
I am using the latest version of Twitter Bootstrap ( 2.3.2 ) as the framework for my site.
The only issue I have run into with Bootstraps navmenu is that when viewing the site on my phone, the dropdown links are not clickable. When you try to click the link the menu closes. Links outside of the dropdown work just fine though. I checked in my bootstrap-dropdown.js and looked for a recommended line of code I found on a GitHub discussion that is supposed to fix the issue but it was already there. What's the fix for this? I appreciate any help with this matter.
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work.
jQuery(document).ready(function($) {
$("li.dropdown a").click(function(e){
$(this).next('ul.dropdown-menu').css("display", "block");
e.stopPropagation();
});
});