Jquery Accordion with Font Awesome Toggle - javascript

I've been looking through the boards, and haven't found a solution to help with my issue at hand. I have an accordion feature that features font-awesome. I want to be able to toggle between the font awesome classes fa-angle-up/fa-angle-down when the accordion button is clicked. This is simple enough, but where I'm running into a problem is that the first div in the accordion should be open on page load, while the others are closed. The code below is allowing the divs to toggle correctly, when one opens the other closes, but the font awesome toggle isn't firing correctly. Right now when I click on a button the first div closes/font awesome toggles correctly, but the button of the div to open, and the rest of the buttons in the accordion, font awesome icon all toggle class.
I'm pretty novice with jquery, so all help is appreciated. Like I said I've looked through the boards to see if any other post related to accordions/font awesome toggles could help me, but everything I tried wasn't working, however I possibly could have been implementing it wrong since I'm not the best with jquery.
Demo here of what I currently have: http://jsbin.com/zaqocu/1/

here is a working code :
$(document).ready(function(){
$(".accordion-toggle").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
$(this).children().toggleClass("fa-angle-up fa-angle-down");
} else {
$(".accordion-toggle").next("div").slideUp("slow");
$(".accordion-toggle i").attr("class", "fa fa-angle-down");
$(this).next("div").slideDown("slow");
$(this).children().toggleClass("fa-angle-up fa-angle-down");
}
});
});
You need to close all the tab before open the one who is clicked.
Have a good one.
http://jsbin.com/cizoziqiji/2/

Check out toggleClass().
For example,
jquery
$('mything').click(function(){
$(this).toggleClass('myclassOne myclassTwo');
});
So when you click, it will remove the current class you have, then add the new one. Click again and it will flip-flop.

Using your jsbin example. I just cleared the classes. I'm not a fan of using toggles, though I'm sure they'd work this way. Basically, any time you click on a headline, default ALL of the arrows to down, then if you are showing a headline, switch that class to up.
Here's the bin: http://jsbin.com/xuzorokaho/1/
I believe if I used toggle for this, it would toggle all arrows up or down depending on their last state, which could be down and supposed to stay down.
$(document).ready(function(){
$(".accordion-toggle").click(function() {
$(".accordion-toggle i").removeClass('fa-angle-up');
$(".accordion-toggle i").addClass('fa-angle-down');
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
} else {
$(this).find('i').removeClass('fa-angle-down')
$(this).find('i').addClass('fa-angle-up');
$(".accordion-content").slideUp("slow");
$(this).next("div").slideToggle("slow");
}
});
});

Related

How to change the href of a button depending on whether a class is active or not

I am struggling to use Js and Jquery to change the href of a button depending on whether a class is active or not. I am still new to Javascript so I'm not sure if this is the best way to go about this but any advice on how to get my current code working properly would be awesome.
Here is my code..
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
The code works for carousel-item-1. It sucessfully changes the buttons empty href attribute to the desired website address. But what can I do to get the other two working? The active class DOES change on the other carousel items so that's not the problem but my button doesn't change the href depending on which carousel item is active. It just stays at the first carousel items link. Thanks for any help
Without seeing the rest of your code, it's hard to advise, but basically you need to apply your if statement logic when a new slide is presented. At that time, the slide will be active and you can apply the attribute.
If you're using the jQuery carousel there is a event called slid.bs.carousel that is fired when a new slide transitions in. For example....
$("#myCarousel").on('slid.bs.carousel', function () {
// The carousel has finished sliding from one item to another
checkForActive()
});
function checkForActive() {
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
}

Jquery Class change on Href change?

I've wracked my brain and I'm hopeful someone else has a solution here.
My client wants a menu to fade out and different menu fade in when you go down the page. https://67livingstonst.com/#home then goes to https://67livingstonst.com/#find-story-67-livingston-2
I can't seem to figure out the event they're using... I'm much more adept at Jquery so if anyone has feedback on what event they're using to trigger the menu fading in that would be amazing...
Here is an example of how to change a class when the href changes to match the id of specific slide. I hope this helps!
$(window).on("hashchange",function(e){
if(window.location.hash == "#find-story-67-livingston-2"){
$("#my-menu").addClass("show");
} else {
$("#my-menu").removeClass("show");
}
})

jQuery Two Tabs

I have two tabs: login & register. It's simple, hide login section when register tab is clicked and vice versa. When I click on register tab, login section is hidden and it's working, but when I try click again on login tab, everything is messed up.
Here is code:
jsfiddle.net/gdc5ryqj/
I created a fork of your fiddle here:
http://jsfiddle.net/fn5yjrgw/
It appears you are using bootstrap, so I would recommend using bootstrap tabs if possible and just applying your styles, but if that's not an option, here is an example (Link above to jsfiddle).
HTML:
I changed the element the tab uses to determine active state to the <div>, rather than the <p>, and put a class 'active' on the login tab to make it the one shown by default.
I added a couple of lines to your CSS at the very end:
/*** Additional Styles (ryantdecker) ***/
#tab-login, #tab-register {display:none;}
#tab-login.tab-active, #tab-register.tab-active {display:block;}
.login-reg-tab {}
.login-reg-tab.active p {
color: #E76E5D;
border-bottom: 3px solid;}
Lastly, the jQuery is simply removing the active and tab-active classes from the tab and panel areas respectively, and then adding them back to the appropriate ones based on the element clicked, so that the CSS takes care of the hiding and showing
$(document).ready(function(){
$('.login-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-login').addClass('tab-active');
});
$('.register-button').click(function(){
$('.login-reg-tab').removeClass('active');
$(this).addClass('active');
$('.login-reg-input-holder').removeClass('tab-active');
$('#tab-register').addClass('tab-active');
});
});
(There are definitely ways to make this even simpler, but not without reworking the markup and classes quite a bit, and I see you have a crazy big CSS file that would probably need to be refactored.)
you forgot to add the class for "tab-active"
$(".register-button").click(function () {
if ($("#tab-login").hasClass("tab-active")) {
$("#tab-login").removeClass("tab-active");
if($(".login-button p").hasClass("login-reg-text-active")){
$(".login-button p").removeClass("login-reg-text-active");}
$("#tab-login").toggle();
}
if($('#tab-login').hasClass('tab-active')) {
$('#tab-register').hide();
}
$("#tab-register").show();
$(".register-button p").addClass("login-reg-text-active");
$("#tab-register").addClass("tab-active")
});
$(".login-button").click(function () {
if ($("#tab-register").hasClass("tab-active")) {
$("#tab-register").removeClass("tab-active");
if($(".register-button p").hasClass("login-reg-text-active")){
$(".register-button p").removeClass("login-reg-text-active");}
$("#tab-register").hide();
//$("#tab-register").toggle();
}
if($('#tab-register').hasClass('tab-active')) {
$('#tab-login').hide();
}
$("#tab-login").show();
$(".login-button p").addClass("login-reg-text-active");
$("#tab-login").addClass("tab-active")
});

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

Using button on collapsed Bootstrap navbar to toggle display of a specific div hidden with class="hidden-xs"

I have a complex search form that I want to hide by default on mobile browsers, instead displaying an icon in the navbar that toggles its display.
The div containing the search form is hidden by default on mobiles using class="hidden-xs"
What I wanted to do was have $("#search").fadeToggle() but this doesn't do the trick, in fact it doesn't appear to do anything.
Instead I am partly there by using $("#search").removeClass('hidden-xs') but this obviously doesn't toggle, or give a fade effect. Am I missing something obvious? The search form is quite complex and I do not want it to be displayed in the navbar even on large screens.
jsfiddle - http://jsfiddle.net/ZNUBx/1/
You can do it with this :
fiddle : http://jsfiddle.net/ZNUBx/2/
JS :
$("#search-button").click( function(){
$("#search").removeClass('hidden-xs').stop().hide().fadeIn();
});
Update: [asker demand][see comment] with hide event
jsfiddle : http://jsfiddle.net/ZNUBx/3
Js:
$("#search-button").on('click', function(){
if( $("#search").hasClass('hidden-xs') )
{
$("#search").removeClass('hidden-xs').hide().fadeToggle();
} else {
$("#search").addClass('hidden-xs');
}
});

Categories