Jquery Accordion open based upon .class - javascript

I have the following JQuery code to operate my accordion menu.
<script type="text/javascript" src="/media/jui/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
</script>
How do I modify the code to detect the 'current' class and open the corresponding panel from the following html script.
<div class="main" style="width:300px">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">accordion-1</a>
<div id="accordion-1" class="accordion-section-content" >
<ul class="nav menuside">
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">accordion-2</a>
<div id="accordion-2" class="accordion-section-content">
<ul class="nav menuside">
<li>Here</li>
<li>Here</li>
<li class="current">Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div>
</div>
How to current class in for open accordion panel.

Related

Find active submenu and remove its class

I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/
Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/
Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>
You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/

How to show only 1 tab at page load

I have my page built up like a navigation bar and below that i have in-page tabs, which are showing different content, but i can't get it to show only one of them at load.
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
and now i want the page to show "tab1" when it's loading the first time, how do i do that?
my JS:
<script>
jQuery(document).ready(function () {
jQuery('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tab' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});`enter code here`
});
</script>
Using JQuery:
$(document).ready(function () {
$(".tab-pane").removeClass('active');
$("#tab1").addClass('active');
});
If you tab HTML is like this
<div class="tabs-container">
<div class="tab-content">
<div id="tab1" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
<div id="previewTemplate" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
</div>
try this:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
e.preventDefault();
// Show/Hide Tabs
var parentLi = $(this).parent();
jQuery('.tabs .tab-links li').not(parentLi).hide();
// Change/remove current tab to active
//jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>

Understanding with custom jQuery slider next button

I have a div with 3 divs inside it each of the inner divs have a class of content and one has a class of current. I was trying to show only one .content at a time and just have a next button that hides the div and removes the .current class and adds it to the next one. It all works fine but when I get to the end of the divs. I want it to just circle back to the first one. The following code doesn't do that. The first one shows but the next button stops working after that:
js:
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').first().slideDown().addClass('current').end();
}
})
})
HTML:
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->
What your $('.content').first().slideDown().addClass('current').end(); does is it'll show the first element and add the current class to it. Change your script to this
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').slideDown();
$('.content').first().addClass('current');
}
});
});
and it will work. Here is a example fiddle. Hope this helps you.
var $ = jQuery
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current").slideDown();
if(i == 3) i=0;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->
It's very easy if you insist to do it with JS :
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current");
if(i == 3) i=0;
})
})
but better option is BOOTSTRAP which I guess you are using.
you can find it here: Collapse Bootstrap

Bootstrap tabs - point two tabs same time

I've got bootstrap tab with following code:
Fiddle
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
<hr />
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu11" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
and JS
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
how to make it work in that way, after clicking one link - content of two DIVS will be changes? i was looking for info how to point not the ID but class, so far without sucess.
I created a jsfiddle http://jsfiddle.net/an0r4buk/1/ to showcase what you're trying to achieve.
$('.nav-tabs a').click(function () {
$(this).tab('show');
$("<a>").data("target", $(this).data("second-tab")).tab("show")
})
Bootstrap toggles one tab at a time, that's why I create a new anchor element and set it's target to the second tab you want to show.
I modified your HTML like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a>
</li>
<li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a>
</li>
</ul>
The href attribute is used for the first tab (home/home1), the data-second-tab toggles the second tab.
try this http://jsfiddle.net/serGlazkov/an0r4buk/2/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $previousActiveTab = $(e.relatedTarget);
var $newlyActiveTab = $(e.target);
var other = $previousActiveTab.attr('href') + '1';
var other1 = $newlyActiveTab.attr('href') + '1';
$(other).removeClass('active in');
$(other1).addClass('active in');
})
Mark your second div.tab-content with id="tab-content2" then the following code will do the trick:
$('.nav-tabs a').click(function(){
$(this).tab('show')
var name = $(this).attr('href').substr(1)
$('#tab-content2').children().each(function(el) {
if (name + '1' === $(this).attr('id')) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
})
})

Multiple tabs with jquery

I'm using the following code for tabs, it works really nicely but I haven't figured out how to show multiple tab sets on the same page properly, would really appreciate it, if someone could give me a little help.
$("ul.tabs li.label").hide();
$(".tab-set > div").hide();
$(".tab-set > div").eq(0).show();
$("ul.tabs a").click(
function() {
$("ul.tabs a.selected").removeClass('selected');
$(".tab-set > div").hide();
$(""+$(this).attr("href")).fadeIn('slow');
$(this).addClass('selected');
return false;
}
);
$("#toggle-label").click( function() {
$(".tabs li.label").toggle();
return false;
});
$("ul.tabs a[href="+location.hash+"]").click();
HTML:
<!-- tab group 1 -->
<div class="widget">
<ul class="tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tab-set">
<div id="1">
tab1
</div>
<div id="2">
tab2
</div>
</div>
</div>
<!-- tab group 2 -->
<div class="widget">
<ul class="tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tab-set">
<div id="3">
tab1
</div>
<div id="4">
tab2
</div>
</div>
</div>

Categories