I cant figure out what I am doing wrong. Here is a link to see example.
http://atozcognac.com/hotel/form/#
My prev and next buttons work but I can't figure out how to change tabs as well if user press prev or next.
Thank you for your time.
$(document).ready(function(){
//When someone clicks on the navigation links
$('.nav li').click(function(e){
$('.nav li').attr('id', ''); //make all navtabs inactive
$(this).attr('id', 'activetab'); //make the one we clicked active
//hide all of the fieldsets
$('fieldset').attr('class', 'myHidden');
whichitem=$(this).attr('title'); //get the title of the nav we clicked
//make the class of what we cleared not hidden
$("fieldset[title='"+whichitem+"']").attr('class', '');
});
//When someone clicks on the previous button
$('.prev').click(function(e){
var listItem = document.getElementById('activetab'); //find out which navtab is active
whichOne=$('li').index(listItem); //get the index of the navtab
$('.nav li').attr('id', ''); //make all the navtabs inactive
$(".nav li:eq("+(whichOne-1)+")").attr('id', 'activetab'); //make previous tab active
$('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
$("fieldset:eq("+(whichOne-1)+")").attr('class', ''); //show the previous fieldset
});
//When someone clicks on the next button
$('.next').click(function(e){
var listItem = document.getElementById('activetab'); //find out which navtab is active
whichOne=$('li').index(listItem); //get the index of the navtab
$('.nav li').attr('id', ''); //make all the navtabs inactive
$(".nav li:eq("+(whichOne+1)+")").attr('id', 'activetab'); //make next tab active
$('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
$("fieldset:eq("+(whichOne+1)+")").attr('class', ''); //show the next fieldset
});
});
You can trigger the click event and use the logic you've already implemented in the click listener. And I would use a class activetab instead of an id.
$(document).ready(function(){
//When someone clicks on the navigation links
$('.nav li').click(function(e){
$('.nav li').removeClass("activetab"); //make all navtabs inactive
$(this).addClass("activetab"); //make the one we clicked active
//hide all of the fieldsets
$('fieldset').addClass("myHidden");
var whichitem=$(this).attr('title'); //get the title of the nav we clicked
//make the class of what we cleared not hidden
$("fieldset[title='"+whichitem+"']").removeClass("myHidden");
});
//When someone clicks on the previous button
$('.prev').click(function(e){
// trigger the click
$(".activetab").prev().click();
});
//When someone clicks on the next button
$('.next').click(function(e){
// trigger the click
$(".activetab").next().click();
});
});
Related
The issue I'm having is, creating a submenu inside another menu.
Demo: LIVE DEMO (Important, cause CSS is needed as well
$(function () {
// Desktop Menu
var categoriesMenu = $(".list-ausbildung-categories li");
var triggerMenu = $(".dropdown-submenuSide");
var highlightsList = $(".list-ausbildung-highlights");
var submenuList = $(".list-ausbildung-submenu");
$('.list-ausbildung-categories').on('click', 'li', function () {
if( $(this).hasClass('active') ){
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
} else {
highlightsList.hide();
submenuList.show();
triggerMenu.addClass('asg-gray-bg-200');
$('li.active').removeClass('active');
$(this).addClass('active');
var subMenu = $(this).find(".dropdown-submenu").html();
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
}
});
$('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
categoriesMenu.removeClass('active');
triggerMenu.removeClass('asg-gray-bg-200');
submenuList.hide();
highlightsList.show();
});
});
I'm having this Bootstrap Mega Menu, which also contains a submenu (Column 2). On click, it should hide Column 3, and show the submenu items. (it does its job)
Currently, I'm grabbing the submenu content with jquery html() and then placing it on the third column (probably not the cleanest method).
The problem: whenever I close a submenu and click again, it won't open back.
It looks like currently, the active class isn't removed on the second click. Instead, it just clears out the HTML of column three. We could fix that by adding a line to remove the active class when we hide the submenu.
if( $(this).hasClass('active') ){
$(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}
Looking at show / hide div dropdown links. I've found a pen of what i'm trying to do. I would like the active div to close automatically when another link is clicked and opened. At the moment the user must close the active div before viewing another. I'm new to JS so any help is appreciated.
Link to codepen
$(document).ready(function() {
/* hide all content divs */
$('.toggle-content').hide();
$('.toggle-trigger').click(function() {
/* if the clicked item is active*/
if ($('.toggle-trigger').hasClass('active')) {
/* hide the next content div*/
$(this).next('.toggle-content').slideUp();
/* and remove the active class*/
$(this).toggleClass('active');
}
/* if the cliked item is NOT active */
else {
/* slide the content div dwon */
$(this).next('.toggle-content').slideDown();
/* and add the active class*/
$(this).toggleClass('active');
}
});
});
$(document).ready(function() {
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.dropdown-container", $dropdown);
$div.toggle();
$("div.dropdown-container").not($div).hide();
return false;
});
});
$('html').click(function() {
$("div.dropdown-container").hide();
});
});
When a tap is clicked you could iterate over all other taps and close them if active:
$(document).ready(function() {
/* hide all content divs */
$('.toggle-content').hide();
$('.toggle-trigger').click(function() {
/* close all other taps but not current clicked tap */
closeActiveTap(this);
/* if the clicked item is active*/
if ($(this).hasClass('active')){
/* hide the next content div*/
$(this).next('.toggle-content').slideUp();
/* and remove the active class*/
$(this).toggleClass('active');
}
/* if the cliked item is NOT active */
else {
/* slide the content div dwon */
$(this).next('.toggle-content').slideDown();
/* and add the active class*/
$(this).toggleClass('active');
}
});
});
function closeActiveTap(current){
$('.toggle-trigger').each(function(index,tap){
if(current!==tap && $(tap).hasClass('active')){
$(tap).removeClass('active');
$(tap).next('.toggle-content').slideUp();
}
});
}
function closeActiveTap takes an param current (current clicked tap) to make sure that on all other taps DOM-operations should be applied onto but not on the current tap because the current tap is handled anyway when reaching if-else codeblock.
Hope this helps
How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})
Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/
I have working code for slidedown menu content.
However I'm having some trouble with keeping the active which is the same as the hover state on when you click a button and taking it off when you click it to close it.
Here is my working example.
// IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
// ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
// OPEN THE SLIDE
$(this).next().slideDown('normal');
}
Here's my solution.
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
var self = this;
$(this).next().slideToggle('normal', function() {
$(self).toggleClass('on', $(this).is(':visible'));
});
});
Try the demo
Try
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').not(this).removeClass('on');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
Demo: Fiddle
I'm pretty new to jquery and I decided to build a jquery tabber. So far so good but I have a little problem!!! I cant see how I can activate the tabber based on the URL. For instance when the link is www.myweb.com#tab2, the second tabber becomes activated. My jquery is as follows.
$(document).ready(function() {
// When page loads...
$(".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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
and HTML list as follows
<ul class="tabs">
<li>Design Team</li>
<li>Publications</li>
<li>Awards & Recognitions</li>
<li>Our Mission</li>
<li class="last-item">Company Profile</li>
</ul>
now when someone visit my website with this link www.mywebsite.com#tab3, I want tab3 to be activated. I know jquery tabber has this but I don't know how achieve this with my own jquery tabber. Any help will be greatly appreciated
Activate an item with href attribute equal to location.hash:
$(document).ready(function () {
var hash = location.hash;
$(".tab_content").hide(); //Hide all content
if ($("ul.tabs li a[href='" + hash + "']").length) { //check if such link exists
$("ul.tabs li a[href='" + hash + "']").parent().addClass("active"); //Activate tab
$(hash).show();
}
else {
$("ul.tabs li:first").addClass('active');
$(".tab_content:first").show()
}
}
Pretty simple. You can trigger click event based on your hash index.
This will work for you. If you refresh the page after clicking for say tab3 and your url contains hash index #tab3, your third tab will be focused automatically.
I assume that you have an id tab1, tab2, tab3, tab4 in your li or a tag and its viola.
Add these codes to your existing code without affecting them and you are done.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$(findToTab).trigger('click');
}
});
Edit:
How ever if you don't want to assign any ids to either li or a tag, you can do this.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$("ul.tabs li a[href='" + findToTab + "']").trigger('click');
}
});