Problem:
I have tabs that are powered by jQuery tabs. Inside tabs there are accordion items that expand when clicked. I'd like to hide all active(opened) accordion div's when I change to a different tab.
Current code that manages accordion behaviour:
var all_spans = $('.accordion-item-text').hide();
$('.accordion-item h3').click(function(e){
$('.accordion-item h3').removeClass('active');
$(this).toggleClass('active');
var thisSpan = $(this).parent().find('.accordion-item-text'),
isShowing = thisSpan.is(":visible");
all_spans.hide(500);
if (!isShowing) {
thisSpan.slideToggle();
}
e.preventDefault();
});
Current code that should manage tab change and hiding all opened accordion elements:
So, i thought that a simple click function would do it but apparently I was mistaken.
$('.ui-tab').click(function() {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
});
This just does not work, do I have to search that exact div before? Any suggestions are welcome.
Current HTML part:
<div class="product_content">
<div id="tabs">
<ul class="clearfix">
<li>About</li>
<li>General specifications</li>
</ul>
<div id="tabs-0" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
<div id="tabs-1" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
</div>
</div>
So, I have found a solution for it.
I dont know exactly why my previous function did not work but after sleeping on it i read jQuery UI documentation and found out that I can use my regular tabs fire function.
$("#tabs").tabs({
activate: function(event, ui) {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
}
});
Related
I have tabs. All of these tabs have their own slider. These sliders have cases (slide) during the discussion according to the "More" scheme, a block should open in full screen with this case absorbed, and it should switch between the "contents" of the slider cases.
I have tabs. All of these tabs have their own slider. These sliders have cases (slide) during the discussion according to the "More" scheme, a block should open in full screen with this case absorbed, and it should switch between the "contents" of the slider cases.
How to make a slider so that the content opens only on pointers, and the elements are transferred exactly on this slider in a tab.
enter image description here
enter image description here
[...document.querySelectorAll('.portfoliobtn')].forEach(function(item){
const caseBtn = item.querySelector('.btn-more');
const caseCloseBtn = item.querySelector('.close__content');
const caseContent = item.querySelector('.portfolio__content');
caseBtn.addEventListener('click', (event) => {
event.stopPropagation();
caseContent.classList.add('case__active');
document.body.classList.add('overflowhidden');
$('.portfolio__content').appendTo('body');
$('ul.tabs#portfolio').appendTo('.portfolio__content .pc__container .pc__header');
$('.swiper-button-next').appendTo('.portfolio__content .pc__container .sbc__wrapp');
$('.swiper-button-prev').appendTo('.portfolio__content .pc__container .sbc__wrapp');
});
caseCloseBtn.addEventListener('click', (event) => {
event.stopPropagation();
caseContent.classList.remove('case__active');
document.body.classList.remove('overflowhidden');
});
});
$('.services__content').each(function(){
let tabTabs = $(this).find('ul.tabs li');
let tabItems = $(this).find('.tab_content').hide();
$(".tab_container .tab_content.active").show();
tabTabs.each(function(i){
$(this).click(function(){
$(this).addClass('active').show();
tabTabs.not(this).removeClass('active');
$(tabItems[i]).addClass('active').show();
tabItems.not(tabItems[i]).removeClass('active').hide();
});
});
});
<div class="services__content">
<ul class="tabs" id="portfolio">
<li class="active"><a>Сайты</a></li>
<li><a>SMM</a></li>
<li><a>Контекст</a></li>
<li><a>Брендинг</a></li>
<li><a>Презентация</a></li>
<li><a>Полиграфия</a></li>
</ul>
<div class="tab_container">
<div class="tab_content active">
<div class="slider__wrapper">
<div class="swiper slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
Слайд 1
<div class="portfoliobtn">
<button class="btn-more">подробнее</button>
<div class="portfolio__content">
<div class="pc__container">
<div class="pc__header">
</div>
<div class="sbc__wrapp">
</div>
<div class="close__content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content">Остальные табы</div>
</div>
</div>
Link codepen
I have a little JS script to toggle 3 different tabs (section1, 2 and 3) on a page. Right now, all tabs are hidden by default. I would like to show the 1st tab (section1) to be displayed on load by default, except when the mobile-navbar is visible (so that no tabs are displayed when the page is displayed on a mobile device).
I'm at a total lost. Would appreciate some guidance! Many thanks.
$(document).ready(function() {
$("#tabs-section .title a").on("click", function() {
if($(this).parents(".tab-content").hasClass("active-section"))
{
$(".tab-content").removeClass("active-section");
}
else
{
$(".tab-content").removeClass("active-section");
$(this).parents(".tab-content").addClass("active-section");
}
if($("#mobile-navbar").is(":visible"))
{
$('html, body, #container, #inner-container').animate({
scrollTop: 0
}, 1000);
}
return false;
});
$( '#mobile-navigation' ).dlmenu();
});
--
<div id="tabs-section">
<div id="section1" class="tab-content">
<h4 class="title">Section1</h4>
<div class="section-content">
</div>
</div>
<div id="section2" class="tab-content">
<h4 class="title">Section2</h4>
<div class="section-content">
</div>
</div>
<div id="section3" class="tab-content">
<h4 class="title">Section3</h4>
<div class="section-content">
</div>
</div>
http://jsfiddle.net/hbezjLpn/
I have created a Tabs function below.
//Tabs ///
$('.tabs').each(function() {
var $tabs = $(this);
$tabs.find('.section-body > div:not(:first-child)').hide().end().find('.section-head a:eq(0)').addClass('active').end().find('.section-head a').on('click', function() {
$tabs.find('.section-head a').removeClass('active').end().find('.section-body > div:eq(' + $(this).index() + ')').show().siblings().hide();
$(this).addClass('active');
});
});
Here is the HTML:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<p>Section A</p>
</div>
<div>
<p>Section B</p>
</div>
</div>
</div>
This working fine, however, I wanted to use a Grid System plugin inside it, the plugin is here: http://loai.directory/Loai%20Aptana/assets/js/grid-system.js
So in order to use the Grid system plugin, the HTML of the tabs will look as follows:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
</div>
</div>
Once I do that, I start getting this error: Uncaught TypeError: Cannot read property '1' of null for a live preview, visit http://loai.directory/Loai%20Aptana/profile and inspect the elements / open the browser console to see it.
I spent hours trying to debug this and fix it. One of the things I have tried, is to remove the tabs JS function and then grid system worked!, so I knew it was something to do with both plugins aren't working nicely together.
After farther dubbing, I found that the Grid System is trying to find the <div class="grid" data-columns> so it can apply the effect to it, however, the tabs function has hidden the one that is inside the second tab div:
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
But, I mean the div is still in the DOM and therefor it should be accessible? What is wrong? how can I fix it?
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/
I'm using jQuery to slideToggle some content when the button is clicked. Here's my HTML:
<div class="seasons">
<div class="container text-center">
<div class="row margin-top-medium">
<div class="col-md-12 1">
<div class="season hvr-shrink">12×01 Chi Cerca Trova</div>
<div class="content">
<div class="hvr-shrink">12×01 Chi Cerca Trova</div>
</div>
</div>
<div class="col-md-12">
<div class="season hvr-shrink">12×02 Il Mini Peter</div>
<div class="content">
<div class="hvr-shrink">12×01 Chi Cerca Trova</div>
</div>
</div>
<div class="col-md-12">
<div class="season hvr-shrink">12×03 Un Quagmire per Quagmire</div>
</div>
</div>
</div>
And this is my script:
$(document).ready(function(){
$(".content").hide();
$(".season").click(function(e){
$(this).next().slideToggle("fast");
});
});
Panels open as they should but when one is opened, and I click to open another panel, the previous one doesn't close. Is there any jQuery code for that?
Thanks everyone for the help!
You are using .hide() function when document is ready. You can use same function, when user click a different panel header.
$(document).ready(function(){
$(".content").hide();
$(".season").click(function(e){
var thiz = $(this);
if(!thiz.hasClass("opened")){
$(".content").hide();
thiz.next().slideToggle("fast");
$(".season").removeClass("opened");
thiz.addClass("opened");
}
});
});
You can see a demo: http://codepen.io/ogzhncrt/pen/zGQqwx