Struggling to add active class/state to faq accordion - javascript

I'm quite the amateur when it comes to Javascript, hence why I'm posting this on here. I've spent quite a lot of time searching for the answer but can't seem to find it.
I've created a FAQ Accordion on jsfiddle and can't for the life on me get it to add an active class/state when the tabs are extended so I can apply styling appropriately.
If anyone can be of any assistance it would be greatly appreciated :)
$(function () {
$('.acc_trigger a').click(function () {
$('.acc_trigger').next('.acc_container').slideUp();
$(this).closest('.acc_trigger').next('.acc_container').stop().slideDown();
return false;
})
$('.expand').click(function () {
$('.acc_trigger').closest('.acc_trigger').next('.acc_container').slideDown('slow');
return false;
})
$('.collapse').click(function () {
$('.acc_trigger').next('.acc_container').slideUp('slow');
return false;
})
});
jsfiddle

What yakutsa said, but to answer your question you can continue to use Jquery and use the .addClass('addedClass') to the end of whichever you wish to change.
For example if you want the opened container to have a red background
$('.acc_trigger').next('.acc_container').slideUp().addClass('addedClass');
width css
.addedClass {
background: red;
}
when you close it, use .removeClass('addedClass');
here's a fiddle

Related

Trouble with Accordion and toggling icons

I am trying this for hours, but seems I have somehow a total brain-fart
What I want to achieve is making an accordion with toggling icons and sliding up panels.
This basically works the minus changes to plus but not when I toggle click the certain header.
$('.accordion-wrapper').on('click', function (e) {
e.stopPropagation();
$(this).next('div.accordion-panel').stop(true, false, true).slideToggle();
// $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus');
$('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp();
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
$(this).removeClass('active-panel');
}
});
This is my fiddle: https://jsfiddle.net/emd381md/11/
I've edited your Fiddle.
You shouldn't use addClass and removeClass in that manner.
toggleClass is a better (and more readable) solution.
Here is a working demo https://jsfiddle.net/ju9L9rne/13/.
Issues were with the names of classes in the if statement. You were using .unalex-plus which is a class all the accordians have, which is what caused the problems.
So I just changed that class to either .glyphicon-minus or .glyphicon-plus depending on, which was needed.
The changed code:
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
$(this).removeClass('active-panel');
}
I don't check your whole code but this looks a bit crazy, maybe the error is here?
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
You first remove glyphicon-plus and add it afterwards.

Close menu when clicked outside of it

I'm using the Slide and Push Menus from codrops (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) and it works fine but I want that the menu closes once you click outside of the menu. You can find the Html, css and Javascript on the site.
I read through a lot of similar stackoverflow threads but can't make it work.
It would be awesome if someone could help me !
As #Xufox commented before in the question. An approach like this:
function closemenu(e) {
example = document.getElementById('example');
if (e.target !== example) {
example.style.display = 'none';
}
};
document.addEventListener('click', closemenu);
You should bind this in the document or window as described in comments as a better way.. =)
Live example.
Hope it helps. Nice coding !

Toggle/Show one defined DIV with JS

I have a fiddle for you: http://jsfiddle.net/vSs4f/
I want to show the div.sub-menu with a simple click on a.haschildren. If the body loads the div.sub-menu should be closed. If I click a second time on a.haschildren the div.sub-menu should be close.
I have sampled so many things but I think the problems are the lot of DIV's. One idea is in the fiddle.
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
$('div.sub-menu:visible').hide();
$(this).next('div.sub-menu').show();
});
});
I really hope you can help me, thanks!
Try this:-
Fiddle
$(function () {
$("a.haschildren").click(function (e) {
e.preventDefault();
var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
$('div.sub-menu:visible').not(subMenu).hide();
});
});
Using .nextUntil to reach a point till the .sub-menu, incase any other siblings come in between this will still work.
Personally there are MANY things I would have changed about the structure of your DOM. I am a strong believer that you should base your javascript structure around a well structured DOM, so the traversal is very easy and intuitive. That being said, I'm going to be slightly daring by submitting my fiddle, in the hope that if nothing else, you can look at it and gain a little insight on how to take advantage of a few DOM quirks to make your javascript a bit more intuitive and elegant.
http://jsfiddle.net/vSs4f/6/
$(function() {
$('#menu > div.item')
.find('a').click(function() {
var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');
// This chunk can disappear if you're not interested in hiding all of the other sub-menus
$('.sub-menu').filter(function(index) {
if(index != submenu_index)
return true;
}).hide();
}).end()
.find('div:first').after('<div class="trenner"></div>');
});
Try
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
$('div.sub-menu:visible').not(item).hide();
});
});
Demo: Fiddle
just use toggle()
$('div.sub-menu').toggle();
Ironically enough, the method you're looking for is .toggle();
http://api.jquery.com/toggle/
try it:
$(function() {
$("div.haschildren").click(function() {
if($(this).next().next('div.sub-menu').is(":hidden")){
$('div.sub-menu:visible').hide();
$(this).next().next('div.sub-menu').show();
}else{
$(this).next().next('div.sub-menu').hide();
}
return false;
});
});

Keep the hover state on the last clicked menu item

I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.
Here's an example: http://jsfiddle.net/Stylock/ta8g4/
In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.
You could add a class to the item like .selected
And in your css you apply the same style to the .selected than the :hover
http://api.jquery.com/addClass/
Or you cloud also modify the css using jQuery. But the first solution is more flexible.
Edit: Use the callback function to add/remove class, after your effect
This might be a solution to the right direction:
Onclick check if the menu already has a classname to get the background changed
remove that class from there
Add the class where you clicked
some minor css changes are needed and u will have solved it
have a great day
you can add a class when other page loads like to add on all pages like
this is bad one
<script type="text/javascript">
$(window).load(function () {
$("#index").toggleClass("highlight");
});
$(window).unload(function () {
$("#index").toggleClass("highlight");
});
</script>
site i used this at http://www.hoteloperaindia.com/
or like this short one to add this to master page
<script>
$(function () {
var loc = window.location.href; // returns the full URL
if (location.pathname == "/") {
$('#home').addClass('active');
}
if (/index/.test(loc)) {
$('#home').addClass('active');
}
if (/about/.test(loc)) {
$('#about').addClass('active');
}
if (/accommodation/.test(loc)) {
$('#accommodation').addClass('active');
}
if (/gallery/.test(loc)) {
$('#gallery').addClass('active');
}
if (/tariff/.test(loc)) {
$('#tariff').addClass('active');
}
if (/facilities/.test(loc)) {
$('#facilities').addClass('active');
}
if (/contact/.test(loc)) {
$('#contact').addClass('active');
}
});
</script>
site where i used this one http://rtshotel.in/
change it with your code

Jquery mouse-over fade-in/out (best practices)

I've got working Jquery code to fade in/out descriptive text in a div below the question. The problem? The solution is not very elegant. Here's what I've got:
$("#home").mouseover(function() {
$("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
$("#homeText").fadeOut();
});
I know there is better way to do this, I'm just not sure what it is.
you could use hover, the first function will act on a "hover over" and the second will act on a "hover out"
The documentation is located here: http://docs.jquery.com/Events/hover
$("#home").hover(function(){
$("#homeText").fadeIn("slow");
},
function(){
$("#homeText").fadeOut();
});
How about 3 lines?
<script>
$(function () {
$('#home').hover(function() {
$('#homeText').fadeToggle("slow");
});
});
</script>
Elegant enough?
Jon, Great advice! I used as a staring point though for a more complete solution. Doing this with just the basic hover would still leave me with a hover call for single menu item..A lot of redundant code. So using what you suggested, I came up with this:
$('.topMenu').hover(function()
{
$('#_'+this.id).fadeIn("slow");
},
function ()
{
$('#_'+this.id).fadeOut();
});
});
All menu items are given the topMenu class and ID. The corresponding div to display is the same id as the menu item, just prefixed with _
Example:
....
Stuff about us!
...
Thanks!
$(function () {
$('#home').hover(function() {
$('#homeText').fadeIn("slow");
});
$('#home').mouseout(function() {
$('#homeText').fadeOut("slow");
});
});

Categories