I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
Related
I'm using HTML templates, which are based on Bootstrap 4.3.1 to present my students with learning content. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened.
A working example can be found on this CodePen: https://codepen.io/hagelslag1001/pen/MWGeZJr
The HTML code is as follows:
<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 2 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<p class="small">Accordion: end copy</p>
Is it possible to change this default behaviour so that only one panel can be opened at a time? (i.e. as soon as a new panel is opened, the previously opened panel will automatically close)
The Bootstrap examples use (data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne") to accomplish this for the accordions in these templates
I can't figure out how to accomplish this, since the HTML code for the accordions in these templates look different than the Bootstrap 4 examples, which use either an a or button tag to trigger the collapsible event.
Here is a simpler answer based on your CodePen: https://codepen.io/mrtcntn/pen/MWGeZdP
According the Bootstrap 4 docs, you need id="accordion" on the top level div and you don't need to give ids like id="accordion_1" and id="accordion_2".
Therefore I removed the first portion from the JS and added id="accordion" at line 18 in the HTML.
You can do this by letting javascript check for active classes and only allowing one at the time. Here's a simplified example.
// DOM here
let nav = document.querySelector(".nav");
// Handlers here
const clickHandler = function (e) {
if (e.target.classList.contains("nav__link")) {
const link = e.target;
const siblings = link.closest(".nav").querySelectorAll(".nav__link");
link.classList.toggle("active");
// removes all actives except for the clicked one
siblings.forEach((el) => {
if (el !== link) el.classList.remove("active");
});
}
};
// Listeners here
nav.addEventListener("click", clickHandler);
body {
font-family: sans-serif;
}
.nav__link {
display: block;
width: 100%;
}
.active {
background: #0f0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#accordeon--1">Accordeon 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--2">Accordeon 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--3">Accordeon 3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--4"
>Accordeon 4</a
>
</li>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I have a cart icon. When I hover on the cart icon display of one div changes from display:none to display:block means that div only appears when I hover on cart icon. This div contains one button View Cart on clicking which I need to alert something.
This is my code which I typed in console. But it only works when I first hover the icon (hovering icon changes display:none of a div to display:block) and then write on console. If I write this code in console before hovering it will not work.
$('#qa_cartletCartButton').click( function(){alert('yes');} );
ID of div: cartletDrop
ID of button: qa_cartletCartButton
These codes are also not working.
if ($('#cartletDrop').is(':hidden')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
if ($('#cartletDrop').is(':visible')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
This is the site HTML code which I am scraping.
<div class="shopping_cart">
<header class="header">
<a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
<span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
<span class="shopping_cart_quantity">3</span>
</a>
</header>
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
</div>
This line in html is empty before i hover.
<section style="display: none;" id="cartletDrop" data-refresh="0">
</section>
Once i hover in cart icon it's now like this.Only display property changes.
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
seems html inside section tag is not present before first hover.
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>
i have this tab in bootstrap:
<ul class="nav nav-tabs" id="feedtab">
<li class="active">Atlass</li>
<li>Aviation</li>
<li>Processing</li>
<li>IT&S</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="atlass"><div id="updates" data-id-type="1"><div class="alert alert-default well" style="background-color: #f1f1f1"><i class="fa fa-spinner fa-spin"></i> Portal is Initilizing... Please Wait.</div></div></div>
<div class="tab-pane" id="avi"><div class="well" style="background-color: lightsteelblue;">Aviation Feed Will go here.</div></div>
<div class="tab-pane" id="proc"><div class="well" style="background-color: lightsteelblue;">Processing Feed Will go here.</div></div>
<div class="tab-pane" id="it"><div class="well" style="background-color: lightsteelblue;">IT&S Feed will go here.</div></div>
</div>
How do i have an event or soemthing in jquery for when the active tab is changed?
i want to call a javascript function when the active tab is changed.
i've tried this but dosent work:
<script>
$('#feedtab [data-toggle="tab"]').on('shown.bs.tab', function (e)
{
alert('test');
})
</script>
Straight out of the documentation
There are two events that get fired
show.bs.tab & shown.bs.tab as their name implies one gets fired before the new content is shown, the other one right after.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//e.target -> activated tab
//e.relatedTarget -> previous tab
});
This question already has answers here:
Keep toggle state on divs using cookie.js after page refresh view jsFiddle
(2 answers)
Closed 9 years ago.
I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.
The html is this:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
The CSS is this:
#sub-nav-wrap {
display: none;
}
This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...
you're almost done everything right only have written a lot of superfluous :)
$(function(){
if($.cookie('submin_visible') == 'true') {
$('#sub-nav-wrapmin').show();
$('#sub-nav-wrap').hide();
} else {
$('#sub-nav-wrapmin').hide();
$('#sub-nav-wrap').show();
}
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
$.cookie('submin_visible', isVisible);
});
});