I've been trying to get my divs to display per click - which works..... However, I want Div1 to be shown - but Div2 and Div3 hidden until clicked and when clicked, the current visible div should be hidden.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
I've managed to get the following:
Show all on load and show none until a click is registered. But onlick seems to not work when I add in the classes:
Show (display:block;)
hide (display:none;)
What could be causing this?
I would like for tab1 to show on page load, but tab 2 and tab 3 only show when clicked..... But that also hides the current active div.
Is there another method to onclick?
Just specify the first tab in your css. JQuery will add it's own CSS which will have a higher specificity on click.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display: none;
}
.platform.tab1 { /* <-- I added this */
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Instead of using .hide() and .show() you could use a show class. Include this in the class of the first tab, then change it in the click handler.
$(function() {
$("#tabs li a").click(function() {
$(".platform.show").removeClass("show");
var myDiv = $(this).attr("href");
$(myDiv).addClass("show");
});
});
.platform {
display: none;
}
.platform.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1 show" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Related
I am having some difficulty using using an accordion in HTML & JS. I am trying to code it so only one accordion is open at a time. If someone clicks and opens a new accordion, all the other should close. This my HTML.
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
HUMBER RADIO
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>RADIO NEWS</li>
<li>PODCAST</li>
<li>CONTENT</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
TV NEWS
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>COVID UPDATES</li>
<li>NORTH CAMPUS NEWS</li>
<li>LAKESHORE CAMPUS NEWS</li>
</ul>
</div>
</div>
</div>
</div>
Here is the JavaScript for the code. It can open all of them, but I am struggling to program it so the others close.
window.onload = pageReady;
function pageReady() {
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if(accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = "100px";
}
else {
accordionItemBody.style.maxHeight = "0px";
}
});
});
}
A couple of tweaks:
Before setting the currently clicked header to .active, we select the previously active header (if it exists) and remove that class.
Instead of setting inline styles using JavaScript, here's the cleaner alternative of setting max-height using just CSS, with the adjacent sibling combinator (a plus sign) to select the accordion body that follows the active accordion header.
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
if (accordionItemHeader.classList.contains('active')) {
accordionItemHeader.classList.remove("active");
} else {
document.querySelector(".accordion-item-header.active")?.classList.remove("active");
accordionItemHeader.classList.add("active");
}
});
});
.accordion-item-header.active+.accordion-item-body {
max-height: 100px;
}
Similar to Jon's excellent answer we are going to let CSS handle the styling and just use javascript to manipulate classes.
The main difference is we are going to accommodate multiple accordion groups and utilize event bubbling. The event listener will be attached to the accordion group and then check the event target. This is also handy if you end up injecting more elements into the accordions with JS.
//Get the Accordion Groups
const accordions = document.querySelectorAll(".accordion");
accordions.forEach(accordion => {
//Add event listener to each ACCORDION , use function not fat arrow to get access to "this"
accordion.addEventListener("click", function(event) {
//Check the event targe is an item header
if (event.target.matches(".accordion-item-header")) {
//Get current active, here "this" refers to the accordion group clicked on
let active = this.querySelector(".active");
//Toggle element if active element clicked
if (active == event.target) {
event.target.classList.toggle("active");
} else {
//Remove current active.
if (active) {
active.classList.remove("active");
}
//Add active
event.target.classList.add("active");
}
}
});
});
.accordion {
width: 45%;
display: inline-block;
vertical-align: top;
}
.accordion .accordion-item-header+.accordion-item-body {
max-height: 0px;
overflow: hidden;
transition: all 0.5s;
}
.accordion .accordion-item-header.active+.accordion-item-body {
max-height: 100px;
}
<div class="accordion">
<h2>Accordion Group 1</h2>
<div class="accordion-item">
<div class="accordion-item-header">
HUMBER RADIO
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>RADIO NEWS</li>
<li>PODCAST</li>
<li>CONTENT</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
TV NEWS
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>COVID UPDATES</li>
<li>NORTH CAMPUS NEWS</li>
<li>LAKESHORE CAMPUS NEWS</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion">
<h2>Accordion Group 1</h2>
<div class="accordion-item">
<div class="accordion-item-header">
JJJ RADIO
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>RADIO NEWS</li>
<li>PODCAST</li>
<li>CONTENT</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Radio NEWS
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<ul>
<li>COVID UPDATES</li>
<li>NORTH CAMPUS NEWS</li>
<li>LAKESHORE CAMPUS NEWS</li>
</ul>
</div>
</div>
</div>
</div>
I have simple tabs on "single-page.html"...
<div class="tabs">
<div class="tab-opt">
<ul>
<li class="active">Impressum</li>
<li>Datenschutz</li>
<li>AGB</li>
<li>Credits</li>
</ul>
</div>
<div class="tabs-content">
<div id="impressum" class="tab" style="display: block;">
...
</div>
<div id="datenschutz" class="tab">
...
</div>
<div id="agb" class="tab">
...
</div>
<div id="credits" class="tab">
...
</div>
</div>
</div>
$(function () {
$(".content-tabs .tab-opt ul li a").on('click', function (e) {
$(".content-tabs .tab-opt ul li").removeClass('active');
$(this).parent().addClass('active');
$(".content-tabs .tabs-content > div").hide();
var hrefId = $(this).attr('href');
$(hrefId).fadeIn().show();
});
});
I want to put links in footer and be able to show some tab on "single-page.html" from any page.
Example:
On homepage, with link in footer:
AGB
I want to open "single-page.html" and show "AGB" tab...
I've a problem with the following code. I've two tabs in my navigation Tab-1 & Tab-2, when the user click on any tab, then I want to add the active class to it and at the same time I want to remove the active class from previously active tab. Also the tab which is currently active should display its content and have to hide the remaining content. It means when the user clicked on any tab it should display only its content and the other contents should be hidden. Please help me thank you.
<style>
.wrapper .tabs {
display: none;
}
.wrapper .tabs.active {
display: block;
}
</style>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li class="active">Tab-1</li>
<li>Tab-2</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>
<!-- Script -->
<script>
$(document).ready(function () {
$('.nav li').click(function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
// To display content for active class only
$('.nav li').click(function() {
$('.wrapper .tabs.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
You can use .eq(), .index() at click event attached to selector "a[href^='#tab-']" which selects element where href begins with #tab-, create variable referencing elements where id begins with tab-, call event.preventDefault() within click function to prevent navigation to document fragment, .hide(), .show()
$(document).ready(function() {
var a = $("a[href^='#tab-']");
var tabs = $("[id^=tab]");
a.click(function(e) {
e.preventDefault();
tabs.hide().eq(a.index(this)).show()
})
})
#tab-1 {
display: block;
}
[id^="tab"]:not(#tab-1) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li>
Tab-1
</li>
<li>
Tab-2
</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>
How do I add a class to an <li> element when it is clicked?
I have the following code:
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)" class="mbutton">Cheerful</li>
<li id="tabs2" onclick="showStuff(this)" class="mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent" style="display: block;">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent" style="display: block;">
<h4>Content 2</h4>
</div>
When the user clicks on the first <li> then content 1 is shown and the same will happen for the 2nd <li> with the 2nd content.
Here is my JS:
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
$('ul#moodtabs li').click(function() {
$('ul li.current').removeClass('current');
$(this).closest('li').addClass('current');
});
I'm trying to add a class active to the <li> tags so I can style them when they are active.
Your code already works (could be though better written)
But most probably you're missign to wrap your jQuery code in DOM ready:
jQuery(function( $ ){ // DOM ready
$('.tabs').each(function() {
var $tab = $(this).find(".tab");
$tab.on("click", function() {
var tabId = this.id.replace(/\D/g,'');
$tab.not(this).removeClass('current');
$(this).addClass('current');
$(".tabContent").removeClass("current");
$("#tabs-"+tabId).addClass("current");
});
});
});
.mbutton {background:none;}
.mbutton.current{background:red;}
.tabContent {display:none;}
.tabContent.current{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" class="tab mbutton">Cheerful</li>
<li id="tabs2" class="tab mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent">
<h4>Content 222222</h4>
</div>
I think the simplest binding would be
$('ul#moodtabs li').click(function() {
$(this).addClass('current').siblings('li').removeClass('current');
});
You can also drop your javascript function entirely and have this be your full function
$('ul#moodtabs li').click(function() {
var myTab = $(this).index();
$(this).addClass('current').siblings('li').removeClass('current');
$('.tabContent').eq(myTab).css('display','block').siblings('.tabContent').css('display','none');
});
I want to show the div of selected HTML link.
For example:
I clicked on the html link Categories the <div id="categories" ... > will be showed and the other div's will hide.
HTML
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
Try this:-
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').hide();
$('#' + $.trim($(this).text()).toLowerCase()).show();
});
Fiddle
OR
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show()
.not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
Fiddle
$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
use the above code to make it work.
Working Fiddle : https://jsfiddle.net/z4bprass/1/
You can use css :target, general siblings selector ~
:target {
display: block !important;
}
:target ~ div[id] {
display: none;
}
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
<div id="quizzes">//default showed Quizzes!
</div>
</div>