We Keep Coding

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...");
}
}

Hyperlink to ID - HTML

I have a contact div in my home page.
<div id="contact">....</div>
In my Menu, I have link to #contact that scrolls down smoothly to contact div.
Contact Us
While on another page, I have to use
<a href="www.mywebsite.com/#contact">
While working with wordpress where I have single menu for all pages, can I have both functionalities simultaneously or I have to create 2 different menus, one for home, one for the rest of the pages?

Add custom link as,<a href="www.mywebsite.com#contact">
in your custom jquery add
//jQuery for Page Scroll - Single page
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
// jQuery for Page Navigation
$( window ).load(function() {
if(window.location.hash) {
var url=window.location.href;
var hash = url.substring(url.indexOf('#')+1);
$('html, body').stop().animate({
scrollTop: $("#"+hash).offset().top
}, 1000);
}
});

Solution #1 - interchangeable menu items
Add x2 menu items:
Select "Screen Options" in the top-right of the screen
Select "CSS Classes" under Show advanced menu properties
Add x2 custom links ("Custom Links box"), e.g:
#contact
/#contact
Once the menu item has been added, click on it to expand it, add a
custom class in the input field below the label "CSS Classes
(optional)", e.g:
anchor-link for menu item #contact
internal-link for menu item /#contact
Declare custom styles:
/* for the home page */
.home .anchor-link {
display: block; /* or inline-block, whichever is applicable */
}
.home .internal-link {
display: none; /* hide on home page */
}
/* for every other page */
.anchor-link {
display: none; /* hide on every other page */
}
.internal-link {
display: block; /* or inline-block, whichever is applicable */
}
Note: Wordpress has a body class for the home page, appropriately called home - you can use this as a base selector for any home page specific style rules you need to declare.
Solution #2 - jQuery .attr() method
Wordpress links to jQuery CDN libraries, so we can leverage the benefits of jQuery and how it suits the requirements of a situation such as the one we have here.
Using the jQuery .attr() method, we can write a script that checks if the element in question, the url is anchoring to, already exists on the page, if it does we remove the preceding forward slash from the url of the menu item to make it an anchor link rather than an internal link.
Add the menu item and script:
Follow the methods mentioned in solution #1 to see how to enable
CSS Classes for menu items - we will need this class as a selector to target with the
jQuery script
Add the menu item as an internal link with a relative url
(better to keep it as a link initially since more often than not,
it'll need to be one - you only have the element with the id
#contact on the home page, so the script we are writing will only
have to run on the home page)
Write the script, then add it to your theme files, like the
header.php or footer.php*
*Here I would advise against editing core theme files, your customisations will be lost with any theme updates, it's also an easy way to wreck a theme if you are not wholly sure what you are doing. I would highly recommend installing a plugin for these customisations, a plugin like "Insert Headers & Footers" by WP Beginner will work perfectly, you should also find this plugin useful for future customisations of this nature and not only applicable for this "once-off use-case" - about the only time you will find me advocating the use of a plugin, otherwise it's just code bloat and another addon to maintain.
The jQuery script:
Untested but should suffice to demonstrate the intention
jQuery(document).ready(function(){
if(jQuery('#contact').length) { /* if '#contact' exists length will be greater than 0 */
/* update the href attribute for the anchor link in question */
jQuery('.dynamic-link a').attr('href','#contact');
}
});
The above script will run when the document is ready to check if the element with the id "contact" already exists on the page, if it does, it'll update the href attribute on the menu item we added the custom class to (.dynamic-link). Note that this custom class is added to the list item (li) and not the nested anchor link (a).

Jquery Accordion with Font Awesome Toggle

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");
}
});
});

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');
}
});

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