Multiple Accordion on Page? - javascript

im using this Accordion ... https://jsfiddle.net/y7czusd7/1/
$(".tab_content").hide();
$(".tab_content:first").show();
/* if in tab mode */
$("ul.tabs li").click(function() {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
});
$(".tab_container").css("min-height", function(){
return $(".tabs").outerHeight() + 50;
});
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
as you see i try to use 2 on the same page, but only the first one is working fine, how can i fix that both work?
Thanks!

You need unique DOM id on same page that why it's not working.

You're using the same Id on both tabs, try changing the seconds one.

I have updated your fiddle: https://jsfiddle.net/y7czusd7/6/
The changes:
1) You need to give different ID's to objects in your HTML. Duplicate ID's are not valid HTML and as a result JQUERY is finding all the objects with the same id and performing an action upon them. In your case it was hiding the div with the content in both list objects.
To demonstrate how to resolve this I've just used two tabs for brevity, note the rel attribute of the li and h3 elements match the id attribute of a div element. Also the div elements with the class tab_container now have id's set.
<div class="tabs_wrapper">
<ul class="tabs">
<li class="active" rel="tab1">Tab 1</li>
<li rel="tab2">Tab 2</li>
</ul>
<div id="con1" class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
<div id="tab1" class="tab_content">
<h2>Tab 1 content</h2>
<p>Tab 1</p>
</div>
<!-- #tab1 -->
<h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
<div id="tab2" class="tab_content">
<h2>Tab 2 content</h2>
<p>Tab 2</p>
</div>
<!-- #tab2 -->
</div>
</div>
<div class="tabs_wrapper">
<ul class="tabs">
<li class="active" rel="tab21">Tab 1</li>
<li rel="tab22">Tab 2</li>
</ul>
<div id="con2" class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab21">Tab 21</h3>
<div id="tab21" class="tab_content">
<h2>Tab 21 content</h2>
<p>Tab 21</p>
</div>
<!-- #tab21 -->
<h3 class="tab_drawer_heading" rel="tab22">Tab 22</h3>
<div id="tab22" class="tab_content">
<h2>Tab 22 content</h2>
<p>Tab 22</p>
</div>
<!-- #tab22 -->
</div>
</div>
2) Your JavaScript also needs tweaking, the click function of the class ul.tabs li needs to target the tab_container class of the correct div element. I've done this by determining the parent of the active tab (which you had already identified) and then using this object to hide all child divs. This is as per below, note the parent container variable and it's use:
$("ul.tabs li").click(function() {
var activeTab = $(this).attr("rel");
var parentContainer = $("#"+activeTab).parent("div.tab_container").attr("id");
$("#"+ parentContainer).children("div").hide();
$("#"+activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
});
The same can be applied to your other click function for completeness.
Hope this helps.

Related

Jquery only showing on click - not on load and click

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>

How to toggle between two classes for each corresponding div?

I have multiple carousels using the Slick Slider plugin on one page. I've managed to setup custom navigation for each carousel but I would like each navigation link to toggle between two classes when clicked.
I've managed to create a toggle between the two however it's applying the toggle to all carousels, not just the one with the navigation that's been clicked.
Update:
I need the classes to only toggle when the carousel changes slide.
I'm almost where I need to be but a little stuck and would appreciate any help finishing this off.
Here's the demo - http://jsfiddle.net/81t4pkfa/158/
HTML:
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
<div class="option">
<p>Test 1</p>
</div>
<div class="option">
<p>Test 1 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
1. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
1. Slide 1
</li>
</ul>
</div>
<div class="test">
<div class="option">
<p>Test 2</p>
</div>
<div class="option">
<p>Test 2 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
2. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
2. Slide 1
</li>
</ul>
</div>
<div class="test">
<div class="prev_next"></div>
<div class="option">
<p>Test 3</p>
</div>
<div class="option">
<p>Test 3 -</p>
</div>
<ul class="tabs">
<li class="tab slide-0 active-slide">
3. Slide 0
</li>
<li class="tab slide-1 inactive-slide">
3. Slide 1
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
JS:
$('.test').each(function (idx, item) {
var carouselId = "carousel" + idx;
this.id = carouselId;
$(this).slick({
slide: "#" + carouselId +" .option",
adaptiveHeight: true,
autoplay: false,
arrows: false,
dots: true
});
});
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$('.tab').toggleClass('inactive-slide active-slide');
});
Change to this
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).parents('.tabs').find('.tab').toggleClass('inactive-slide active-slide');
});
EDIT :
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).parents('.tabs').find('.tab').removeClass('active-slide');
$(this).parents('.tabs').find('.tab').addClass('inactive-slide');
$(this).parent().addClass('active-slide');
$(this).parent().removeClass('inactive-slide');
});
What you really want do is to change tabs activity class not on click but on slide change. You should keep only slide change trigger (slickGoTo) in your .tab on click event. There's a set of events in Slick Carousel that will tell you that the slide has (or is going to) change, e.g. beforeChange. That's what you should use to toggle activity.
Your code should look then like this:
$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (currentSlide !== nextSlide) {
$(this).find('.tab').toggleClass('inactive-slide active-slide');
}
});
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
});
http://jsfiddle.net/norin89/81t4pkfa/161/
UPDATE:
Note that this gonna work only for 2 slides due to .active-slide / .inactive-slide classes toggling. So on slide change in current code all previously inactive tabs will be toggled to active. If you want only one active tab to get .active-slide class you might do something like this:
$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(this).find('.tab').removeClass('active-slide').addClass('inactive-slide')
.eq(nextSlide).toggleClass('active-slide inactive-slide');
});
http://jsfiddle.net/norin89/81t4pkfa/164/
The issue is because you're toggling the class on all .tabs elements. Instead you need to traverse the DOM to call toggleClass() only on those which are contained within the same .tabs as the a which caused the click event. To do that you can use closest() and find(), like this:
$(".tabs li a").click(function(){
var slideIndex = $(this).parent().index();
$(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
$(this).closest('.tabs').find('.tab').toggleClass('inactive-slide active-slide');
});
Updated fiddle

navigation through JqueryUI tabs using <a> tag

I found out on several articles that it is possible to navigate JqueryUI tabs using a button or tag.
I am using this simple method
$("#vtabs").tabs();
$("#tabsinner").tabs();
$(".changeTab").click(function() {
alert("asdas");
var selected = $("#tabsinner").tabs("option", "selected");
$("#tabsinner").tabs("option", "selected", selected + 1);
});
and the html :
<div id="vtabs">
<ul id="verticalUl">
<li>Outer Tab 1</li>
<li>Outer Tab 2</li>
<li>Outer Tab 3</li>
</ul>
<div id="vtab-1">
<div id="tabsinner" >
<ul id="horizontalUl">
<li>Inner Tab 1</li>
<li>Inner Tab 2</li>
<li>Inner Tab 3</li>
</ul>
<div id="tabsinner-1">
<h2>Content heading 1</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-2">
<h2>Content heading 2</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-3">
<h2>Content heading 3</h2>
</div>
</div>
</div>
<div id="vtab-2">
<h2>Vertical Tab Content heading 2</h2>
</div>
<div id="vtab-3">
<h2>Vertical Tab Content heading 3</h2>
</div>
Now I am using vertical tabs to the left side and than more horizontal tabs inside the outer tabs (nested tabs). Now I think that this is not the issue since I removed the outer ones and it still doesn't work.
Thanks!
There are 2 problems I can see, the class of the next button is nexttab and the option to use is active
$(".nexttab").click(function () {
var selected = $("#tabsinner").tabs("option", "active");
$("#tabsinner").tabs("option", "active", selected + 1);
});
Demo: Fiddle

JQuery Slide Onclick

I am using the code in example http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ I am trying to slide the div tags on a button click on the list so the current tab-content will slide in and the tab just clicked will slide out. I currently have the working example where I can switch between divs fine, but I need to slide in and out between divs. Is there any script I can do this with the current code. using .slide or .effect instead of .show() looks to display two divs at the same time. I'm not sure what I am doing wrong.
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Main Screen</li>
<li tab="tab2">Div 1</li>
<li tab="tab3">Div 2</li>
<li tab="tab4">Div 3</li>
<li tab="tab5">Div 4</li>
<li tab="tab6">Div 5</li>
<li tab="tab7">Div 6</li>
<li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
<h4>Main Screen</h4>
</div>
<div class="tab-content">
<h4>Div 1</h4>
</div>
<div class="tab-content">
<h4>Div 2</h4>
</div>
<div class="tab-content">
<h4>Div 3</h4>
</div>
<div class="tab-content">
<h4>Div 4</h4>
</div>
<div class="tab-content">
<h4>Div 5</h4>
</div>
<div class="tab-content">
<h4>Div 6</h4>
</div>
<div class="tab-content">
<h4>Div 7</h4>
</div>
My Script looks like
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
Try Vertical jQuery UI Tabs. You might have to restyle a little bit, but I think the effect is what you want. You should be able to add the slide effect from http://api.jqueryui.com/slide-effect/ to the change tab event.

Problem with simple jQuery Tabs

I have a very simple jquery tabs functions that looks like this :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
and the HTML for it is :
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab2" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab3" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab4" class="tab_content">
<h2>Content</h2>
</div>
</div>
</div>
What im trying to do here is add another tab navigation, so bacically repat the ul tag with content in it but different class so I can have something like this :
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<ul class="markers">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
..and whenever I click on any of the list it will affect in other group.
Any help much appreciaated.
Thank you for your help in advance.
Dom
you sholud use a class name or id or an element to use fadein() like this
$("#id").fadeIn("slow");
but in your code you are trying to use href attribute .
here.................
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
i think you can't use like that
http://api.jquery.com/fadeIn/
try to put a class for <a> tag a grab that tag using the class identifier
as
var activeTab = $(this).find("a.classname").attr("href");
it will only affect the tags whose class is matched with the one you specified

Categories

Resources