Jquery Tabs Highlight When Clicking 'Next' Button - javascript

I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs
Here is the code
$(document).ready(function() {
//First we make sure to only show the first section
$('header').children('section').hide();
$('header').children('section').first().show();
//When we click a link do this..
$('nav ul li a').click(function(){
//Makes sure the active tab gets a different color
$('nav ul li a').removeClass('active');
$(this).addClass('active');
//we pull out the href E.g #tab2
var href = $(this).attr('href');
//We slide up all sections and only reveal the one we clicked E.g #tab2
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
// TRYING TO GET THE CURRENT TAB TO HIGHLIGHT WHEN I CLICK 'Next'
$('section a').click(function(){
$('nav ul li a').removeClass('active');
$('nav ul li a').addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
});
.active{
background-color: lightgrey;
}
<nav>
<ul>
<li><a class="active" href="#tab1">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
</nav>
<header>
<section id="tab1">
This is the content to be displayed in TAB ONE!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab2">
This is the content to be displayed in TAB TWO!
Next
</section>
<section id="tab3">
This is the content to be displayed in TAB THREE!
Next
</section>
<section id="tab4">
This is the content to be displayed in TAB FOUR!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab5">
This is the content to be displayed in TAB FIVE!
Next
</section>
<section id="tab6">
This is the content to be displayed in TAB SIX!
</section>
</header>
I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs

Here are some hints:
Use preventDefault on click handler
Use the .active class to add/remove active class
For your next button, you were adding the .active class to ALL of your links, the trick was to select the right one.
Finally, here is the fiddle
And here is the code for your next link
$('section a').click(function(e){
e.preventDefault();
$('.active').removeClass('active').parent().next().children().first().addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});

Related

Why does my accordion list keep closing?

I've created a side menu that contains accordion list. When I load the page, the accordion list has one section open because it's coded to be active on page load. However if I attempt to open another section... it opens the section but then closes straight away. Can someone tell me where I'm going wrong?
List code:
<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Group 1</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li>
<h3><span class="icon-tasks"></span>Group 2</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Group 3</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
</ul>
JS:
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
You must wait until the execution of the slideUp function is completed (by default the duration is 400ms) before you test if the next element is visible or not.
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
var $elemH3 = $(this);
setTimeout(function() {
if(!$elemH3.next().is(":visible"))
{
$elemH3.next().slideDown();
}
}, 401);
})
})
You can use some CSS to do this easily see this example : http://jsfiddle.net/nx2LkoLd/
You hide all sections but not the active one :
css code
li.active ul {
display:block;
}
li ul {
display: none;
}
The js and html code still the same.
Hope it's clear and will help you resolve your problem.
Default position of accordion is collapsed... put this on the begining of your $(document).ready to expand it.
$('#accordian').collapse({toggle: true});
EDIT:
In your case:
$(document).ready(function(){
$('#accordian').collapse({toggle: true});
});
Or... if you want your accordion expands independent of the ready event you can put this line anywhere in your js file (except inside another function):
$(function () { $('#accordian').collapse({toggle: true}); });
Both will work, but I'm not sure if your own functions are working, so be careful. I'm sorry, no time to test. ;)

How can I remove all text after the last <li> of every <ul>?

I have a menu with their submenus too. After the page loads.. The website generates random texts after every end of submenus..
This is the current markup that is generated from firebug:
<nav class="shopMenuHover">
<div id="bx_incl_area_5_1">
<ul>
<li><a href="#" >First Menu</a>
<div class="" style=""><h2>First Sub Menu</h2>
<ul>
<li>
Sub Menu > Sub Menu
</li>
<li>Sub Menu > Sub Menu 90797</li>
</ul>
</div>
</li>
<li class="firstLevel hasSubmenu instrumentarium-en-fresen">
Second Menu
<div><h2><a href="">Second Menu</h2>
<ul>
<li><font><font>Sub Menu > Sub Menu</li>
<li>Sub Menu > Sub Menu 896346</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
Problem: The texts 90797 and 896346 are texts generated randomly by the website. How can I remove these texts after every last li > a inside every ul?
This is the current jquery i used to select only the text inside a tag:
<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>
Output: Remove all texts after a tag of every last li-last-child..
Please Help Me...
You can select all the nodes, including the textnodes, with contents(), then use filter() to get just the textnodes outside the anchors, and remove them
$(".shopMenuHover ul li:last-child").contents().filter(function() {
return this.nodeType === 3;
}).remove();
FIDDLE
Here is a way to do this with CSS using the visibility property :
DEMO
.shopMenuHover ul li:last-child{
visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
visibility:visible;
}
note : use the * selector so it works even if the <li> contains something else than a link.
Another option would be to set the html of the li to just the a.
$(".shopMenuHover ul li:last-child").each(function(){
var $this = $(this);
$this.html($this.children("a"));
});
http://jsfiddle.net/ujrp151h/1/
This would also clear anything else within the element other than the a, not just text nodes.

Stopping a SlideUp When link is clicked

So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});
Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});
To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.

jQuery Tab switcher on Hover event instead of Click

I have a simple Tab switcher, right now you click on a tab to switch it but I would like to change it to a hover to switch instead.
Below is the code and the JSFiddle shows it in action right now with the click event http://jsfiddle.net/jasondavis/p95nJ/
jQuery(document).ready(function($) {
//tabs
$("ul.tabrow li:first").addClass("active").show(); //Activate first tab
$(".tab-content div:first").show(); //Show first tab content
//On Click Event
$("ul.tabrow li").click(function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab-box").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;
});
});
If you can help I would really appreciate it. I do NOT want to use jQueryUI
The HTML
<div class="tab-wrap">
<ul class="tabrow">
<li class="">Tags</li>
<li class="">Recent Articles</li>
<li class="active">Tools</li>
</ul>
<div class="tab-content">
<div id="tab_tags" class="tab-box" style="display: none; ">
<div class="taglist">
<ul id="tag-list">
<li>PHP</li>
<li>Personal</li>
<li>Wordpress</li>
</ul>
</div>
<div class="clear">
</div>
View All Tags →
</div>
<div id="tab_recent" class="tab-box" style="display: none; ">
<ul>
<li class="widget">WordPress Custom Editor Quicktag Buttons</li>
<li class="widget">Welcome to CodeDevelopr</li>
</ul>
</div>
<div id="tab_tools" class="tab-box" style="display: block; ">
Coming Soon. In the mean time subscribe to the RSS Feed
</div>
</div>
</div>
You should use .hover method. See http://jsfiddle.net/p95nJ/1/
$("ul.tabrow li").hover(function() {
$(this).addClass("active"); //Add "active" class to selected tab
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;
}, function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(".tab-box").hide(); //Hide all tab content
return false;
});
Change
$("ul.tabrow li").click(function() {})
to
$("ul.tabrow li").hover(function() {})
$("ul.tabrow li").hover(function() { $(this).find("a").click();});

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