I'm trying to use a script to make only one toggle open at a time on a website page built with Elementor. I am using three toggle widgets in different places on the same page.
I have tried adding the script in different locations and also tried to test it with different browsers but no luck. The script runs without any error but none of the toggles are opening. I already did all the steps of checking the script location, browser developer console and jQuery loading and I also tried to switch to a default WordPress theme. The problem persists.
My script is as follows:
<script>
jQuery(document).ready(function($) {
$('.elementor-tab-title').on('click', function() {
$('.elementor-tab-title').not(this).removeClass('elementor-active')
.attr('aria-expanded', 'false')
.attr('tabindex', '-1')
.attr('aria-selected', 'false');
$(this).addClass('elementor-active')
.attr('aria-expanded', 'true')
.attr('tabindex', '0')
.attr('aria-selected', 'true');
});
});
</script>
It is important to note that in this particular case, I am not using the accordion widget that is provided by Elementor, since it has the first element opened by default on page load.
Essential Addons for Elementor plugin has an accordion widget that keeps all accordions closed. You could try that and disable all the other widgets if don't need them.
Related
I have a WordPress site, and within the head, I have this CDN:
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/master/bootstrap-hover-tabs.js"></script>
which allows the bootstrap tabs within my menu to trigger on hover.
I also have a single page where I am utilizing tabs that are not within my menu, and I don't want the hover effect to apply to these, but since the CDN needs to sit within my head to effect the menu on every page, it is effecting these tabs as well.
So I am wondering, is there a way to prevent this script from running on just this one page?
Or are there any other methods I can use to make these tabs only activate on click, without removing my hover-tabs.js?
OPTION 1:
in your header
if(!is_page('PAGE_SLUG')){
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/master/bootstrap-hover-tabs.js"></script>
}
OPTION 2:
add this in your functions.php (remove it from your header.php if its there)
wp_register_script('bootstrap-hover', "//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/master/bootstrap-hover-tabs.js", false, null);
if(!is_page('PAGE_SLUG')){
wp_enqueue_script('bootstrap-hover');
}
So I'm working on a project where I'm building a website and I have many pages that include tabs from Bootstrap that use jQuery to work. They work really well and I love them but on my homepage I want to be able to link icons to specific tabs. Once clicked they should move the browser to that page and that tab should open instead of the default active tab. I've found numerous examples of javascript on how this would work but I don't know how I can get the JS to work on my SharePoint site.
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
The above code is from that answered question and I'm wondering if someone can show me how to use this on my SharePoint pages.
So, I've worked on this a ridiculous amount of time for the problem I was actually having. I used the above code along with Bootstrap 3 and jQuery with CDN links in the page. That was correct. I also used the right notation for the url which is www.examplehere.com/blahblah#tab_tab1. The problem I was having was that I loaded this script at the top of the page, prior to the HTML 5 actually loading and making the tabs contained in the body on the SharePoint site. This meant that it went through the code to switch the open tab to the one dictated by the url but the code didn't have anything to change the tabs to since the tabs didn't exist.
So if you want this to work in SharePoint 2013. Save the above code as a .js file, link to it via a Content Editor Web Part, use the urls with the #tab_tab1 syntax as above, and please do yourself a favor and put the Web Part at the bottom of the page unlike I did.
I have a php web project that I used yii framework in..
I have two pages (let's say: index.php, second.php), the first one contains a button witch pops up a bootstrap modal that contains the second page, every thing works fine when I don't use scripts (some jquery) in the second page, but when I do which is my problem, the page loads inside the modal but it's scripts don't work,
what can I do?
You'll want to listen for events from the bootstrap modal:
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
})
I've been trying for some time to activate a jQuery UI accordion's panel from an external link.
I have links within pages that an accordion widget is on that I'd like to use to activate panels of the accordion. These links are not within the accordion widget's markup.
These links are manipulating tab interactivity and are used for popping in AJAX content.
At some states of the application, the { navigation: true } part of my options object for the accordion gets forgotten.
I believe this is because I'm initiating a window.reload.location() to get back to certain states of the application.
The function below shows this. What I think I need is either a custom navigation filter built on hashes, or location that will work within this function to also activate accordion panels depending on what URL the user is on.
I do have navigation set to true in the beginning of my scripts and the following script comes later...
// "Back to xxxtabTitle" button used to revert tabs to their default state after
// photoNav pop-in AJAX content has been loaded
$('#mainContent').on('click', '.backToInitTab', function(event) {
event.preventDefault();
window.location.reload();
// accordion navigation filter to open correct accordion panel on click event
// Can you help with this? I'd greatly appreciate it.
// /accordion navigation filter
});
// /"Back to xxxtabTitle" button
Any help or insight on this issue would be greatly appreciated!
Thanks in advance.
Sincerely,
Dick Kirkland
Sort of the answer: I had to abandon using navigation options with the jQuery UI accordion as I'm using a design on a site that contains buttons that perform reloads on pages and/or UI tab panels with window.location.reload();. If you have this reloading of content in your site, you may see the navigation begin to take effect by opening up the desired accordion panel, but then seeing the panel contracting. I believe this is because normally, clicks from the accordion panel itself instruct the UI accordion component how to react to the hash history. We turned navigation off and did manual instantiations of what panels should open on a minimum of pages. This allows AJAX functionality (tabbed content) to still have the accordion panels open and the only animation seen is when the total page reloads.
write
$( "#accordion" ).accordion({ active: 2 });
refer to this site
JQuery UI tabs are implemented by named anchors in an unordered list. When you hover over one of the tabs you can see this in the link shown at the foot of the browser:
http://mysite/product/3/#orders
Above would be the "orders" tab for example. JQuery obviously intercepts the click to this anchor and opens the tab instead.
However if I bookmark the link above or link to it from elsewhere in the site the page does not open on the specific tab.
In the tab initialisation block I was considering putting in some code that looks for a named anchor in the URL and, if it finds one, does an index lookup of the tabs and calls the select on it. This would mean it will still work with JS switched off.
But is there an easier/nicer/better way?
Found this example here:
if(document.location.hash!='') {
//get the index from URL hash
tabSelect = document.location.hash.substr(1,document.location.hash.length);
$("#my-tabs").tabs('select',tabSelect-1);
}
As of version 1.8 jQuery UI supports this functionality. See example here:
Second tab active by default
Third tab active by default
In versions of jQuery UI prior to 1.8 (not inclusive) that's pretty much the way you would have to do it. The tab extension (AFAIK) doesn't know to switch based on which anchor it is initialized with (when the page loads) so you have to do that bit manually (in the ready event, of course).
As another answer indicates, the new version of the tabs in jQuery UI 1.8 supports bookmarking out of the box.
I use the Session plugin to accomplish this in a custom tab class