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/
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 some tabs set up with jQuery, but I would like to add the capability to change tabs based on URL. Ideally, once the URL is followed by the id/data-attribute, the browser scrolls to the appropriate section and the tab gets open.
$(document).ready(function(){
$('.gdlr-session-item-head-info').click(function(){
if( $(this).hasClass('gdlr-active') ) return;
$(".gdlr-session-item-head-info").removeClass('gdlr-active');
$('html, body').animate({
scrollTop: $(".gdlr-tab-session-item").offset().top-200
}, 1000);
var selected_tab = $(this).attr('data-tab');
var current_day = $(this).attr('current-day');
$(".currentDay-"+current_day).addClass('gdlr-active');
$('.gdlr-session-item-head').siblings('.gdlr-session-item-tab-content').hide();
$('.gdlr-session-item-head').siblings('.' + selected_tab).fadeIn();
});
}
HMTL
<div class="session-item-wrapper" id="agendaroduct" style="margin-bottom: 10px;">
<div class="gdlr-session-item gdlr-tab-session-item gdlr-item">
<div class="gdlr-session-item-head">
<a href="agenda/#currentDay-1">
<div id="currentDay-1" class="gdlr-session-item-head-info currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
<div class="gdlr-session-head-day">Pre-Day</div>
<div class="gdlr-session-head-date">Tue, Nov 5</div>
</div>
</a>
<a href="agenda/#currentDay-2">
<div id="currentDay-2" class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
<div class="gdlr-session-head-day">Day 1</div>
<div class="gdlr-session-head-date">Wed, Nov 6</div>
</div>
</a>
<a href="agenda/#currentDay-3">
<div id="currentDay-3" class="gdlr-session-item-head-info currentDay-2" current-day="2" data-tab="gdlr-tab-3">
<div class="gdlr-session-head-day">Day 2</div>
<div class="gdlr-session-head-date">Thu, Nov 7</div>
</div>
</a>
<div class="clear"></div>
</div>
<div>
<div class="clear"></div>
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-1 " style="display: block;"> content goes here
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-2 gdlr-active" style="display: none;"> content goes here
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-3 " style="display: none;"> conten goes here
</div>
<div class="gdlr-session-item-head end">
<div class="gdlr-session-item-head-info currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
<div class="gdlr-session-head-day">Pre-Day</div>
<div class="gdlr-session-head-date">Tue, Nov 5</div>
</div>
<div class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
<div class="gdlr-session-head-day">Day 1</div>
<div class="gdlr-session-head-date">Wed, Nov 6</div>
</div>
<div class="gdlr-session-item-head-info currentDay-2" current-day="2" data-tab="gdlr-tab-3">
<div class="gdlr-session-head-day">Day 2</div>
<div class="gdlr-session-head-date">Thu, Nov 7</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Any help would be very much appreciate it.
Thanks!
You'll want to find a method of connecting the hash value to a DOM element. In your case, your id attribute on your tab triggers match this and also contain the relevant information to show the correct tabs amongst other functionality (as you've demonstrated in your click event).
You could separate your tab change logic into a function which can then be called by both click events and on page load by passing the intended tab to show as a parameter.
function showTab(element) {
if (element.hasClass("gdlr-active")) return;
$(".gdlr-session-item-head-info").removeClass("gdlr-active");
$("html, body").animate({
scrollTop: $(".gdlr-tab-session-item").offset().top - 200
}, 1000);
var selected_tab = element.attr("data-tab");
var current_day = element.attr("current-day");
$(".currentDay-" + current_day).addClass("gdlr-active");
$('.gdlr-session-item-head').siblings(".gdlr-session-item-tab-content").hide();
$('.gdlr-session-item-head').siblings("." + selected_tab).fadeIn();
}
Your click handler would then be bound to call the function...
$('.gdlr-session-item-head-info').click(function(){
showTab($(this));
})
When the page loads, you could verify the hash in the URL is an available DOM element and send that to your function also.
$(document).ready(function () {
if (window.location.hash) {
var targetTab = $(window.location.hash)
if (targetTab.length) {
showTab(targetTab);
}
}
})
Basically I want one section to be shown at first as the home page. When I click on a link, I want that section to be shown, but everything else hidden, and so on. Every time I click a link, I only want the clicked on link's section to be shown.
I am close, but stuck. Here is my HTML:
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about showing">
<h2>Contact</h2>
</div>
</div>
And here is my script:
$(document).ready(function() {
$('.about').hide();
$('.contact').hide();
$('.showing').show();
$('#contact').on('click', function(e) {
e.preventDefault();
$('div').removeClass('showing');
$('.contact').addClass('showing');
if ($('div').hasClass('showing')) {
$('div').show();
} else {
$('div').hide();
}
});
});
So it shows the 'About Me' section right away and everything else is hidden. When I click the 'Contact' link it removes the 'showing' class from all my 'div's and adds the 'showing' class to my contact section. I then check to see if the 'div' has the 'showing' class, if it does I have it show the 'div' otherwise I want it to hide it.
However, when I click on the Contact link, it does show the Contact section, but it does not hide the About Me section. I know this is a long post, I am just trying to make sure I explain everything correctly. Any help is greatly appreciated!
I would strongly suggest you use data fields and common classes to make it generic.
var $pages = $('.container');
$('.menu').on('click', function(e){
//remove showing from all containers
$pages.removeClass('showing');
//put it on the container with the matching class of the data target
$pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});
.container {
display: none;
}
.container.showing {
display: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
Other
<div class="container-fluid">
<div class="container home showing">
<h2>Home</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact">
<h2>Contact</h2>
</div>
</div>
<div class="container-fluid">
<div class="container other">
<h2>Other</h2>
</div>
</div>
Here's a few things you can optimize:
$(document).ready(function() {
$('.about, .contact').hide(); //put both of them in single selector
$('.showing').show(); //this shows the only element that has "showing
$('#contact, #about').on('click', function(e) {
e.preventDefault();
var self = $(this); //reference to the object being clicked
var target = $("." + self.attr('id'));
//removes "showing" class from all others and hides them
$(".container").not(target).removeClass("showing").hide();
//adds "showing" class to the new current item
target.addClass("showing").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact"> <!--you don't want that "showing" class here!-->
<h2>Contact</h2>
</div>
</div>
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);
}
});
I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this