I'm bulding a hero section that consists of four horizontal accordion items, they expand when user clicks one of them.
One element is active on page load, because I pre-styled it with class "active".
I have code, that removes active class from an active element and sets the active class to the one that's been clicked.
The code looks like this:
<script>
$(".tabs_link").on("click", function () {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
$(this).next(".tabs_content").addClass("active");
});
</script>
The issue with code above is that it only works while users interact with the element, and I need those elements to open/close based on anchors in the link.
I have four anchors, I'd like them to open specific accordion by adding class "active" to the proper element.
The anchors:
#recover
#active
#mother
#kids
each one of .tabs_link and .tabs_content have combo classes so I could set the anchor to the specific child item f.e. .tabs_link.is-blue
Basically i have 4 url scenarios and i need the function to remove active class and set it on each element:
I was thinking to make a template and copy&paste it a couple of times.
f.e.
if(window.location.href.indexOf("#mother") {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
*// I don't know how to declare to what should I add class,
$(this).next(".tabs_content").addClass("active");
Heres the link to the website if you want to check it out and get to know the case better.
[https://fysioo.webflow.io/][1]
You can just use location.hash to add the class to the desired a tag.
Something like this:
function showContent() {
$(".tabs_link, .tabs_content").removeClass("active");
const aTag = $(`.tabs_link[href="${location.hash}"]`);
aTag.addClass('active');
aTag.next('.tabs_content').addClass('active');
}
showContent(); // on page load
Related
I would like to modify the class of certain elements of my sidebar when some user clicks on a tab. In short, change the class of the sidebar elements to current class + " active"
I have implemented a partially working solution as I could after doing some research on my own.
This part of the code is key:
$(".setActive").click(function() {
$(".sidebar-item:contains('"+$(this).attr("data-target")+"')").parent().parent().addClass(' active');
})
Actually, with that line of code, I change the class to active but there is a problem:
I don't know how to remove the active class from the previously visited sidebar elements, then I am getting something like this:
How can I solve this issue?
JS FIDDLE LIVE DEMO
Remove all active class added before adding the current one
$(".setActive").click(function() {
$(".sidebar-element.active").removeClass('active');
$(".sidebar-item:contains('"+$(this).attr("data-target")+"')").parent().parent().addClass(' active');
})
The Issue
My script should be hiding all elements with class "gallery-collapse" then opening the select content based on the link clicked.
Right now, multiple divs will sometimes display when clicking between items.
The Ideal
Ideally, it would make sure all other elements are closed, mutually exclusive to the item clicked on. (i.e. clicking on an anchor with "speaker1-expand" would close all elements with class "gallery-collapse" and then toggle the "speaker1-content")
The Script:
<script>
j(".speaker1-content, .speaker2-content, .speaker3-content, .speaker4-content, .speaker5-content, .speaker6-content, .speaker7-content").hide();
j('.speaker1-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker1-content').slideToggle('slow');
});
j('.speaker2-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker2-content').slideToggle('slow');
});
j('.default-expand').click(function(){
j(".gallery-collapse").hide();
j('.speaker-default').slideToggle('slow');
});
</script>
The JS Fiddle
http://jsfiddle.net/2SCJe/10/
You can probably shorten the code to something like:
j("[class*='-content']").hide();
j('[class^="speaker"]').click(function(){
//Find the right class to toggle
var class = j(this).attr("class").split("-")[0];
class += "-content"; // <---This is now the correct class to slide down
//re hide everything
j("[class*='-content']").hide(); // <--- re-hide everything
j(".gallery-collapse").hide();
//Show it
j("." + class).slideToggle("slow");
});
Fiddle demoing the concept: http://jsfiddle.net/Y6mHj/
My website has a navigation bar that when clicked targets an iframe.
i would like the "active" link color to be changed.
P.S can't use jQuery, only JS and CSS.
my idea was to have an ID named ACTIVE and give the clicked link the ID active, after removing the ID from all the rest.
though i have no idea how its possible to do so.
on the other hand another option is to do the same only using a class called ACTIVE, my problem there is each link has allready a class assigned to id, and i have no idea how to remove one class out of two.
This is a problem best solved using classes. If you can't use jQuery, you can add classes in JavaScript via something like:
document.getElementById("someID").className += " newClass";
Remove a class using regex:
document.getElementById("someID").className = document.getElementById("someID").className.replace(/\bnewClass\b/,'');
If it doesn't make sense to give each link an ID, you can attach a click handler:
onclick="changeColor(this)"
And add the subsequent function:
var activeLink;
function changeColor(elem){
if(activeLink)
activeLink.className = activeLink.className.replace(/\bnewClass\b/,'');
elem.className += " newClass";
activeLink = elem;
}
[ Live Demo ]
I have a navigation menu that displays a certain state when hovered and also displays text in a different div.
In the event that the user does not interact with the menu, the divs auto cycle on their own and the navigation menu displays the corresponding hover state as if the user were interacting.
However, as it is cycling, if the user hovers over another link on the navigation menu, I need to removeClass on the previously highlighted element.
How do I write, "if id is not currently hovered id, then removeClass('hoverBold') on all other navigation links"
Look at jQuery not().
Something like...
$('.myMenu').hover(function() {
$('.myMenu').not(this).removeClass('hoverBold');
});
Just add this to hoverIn:
links.removeClass('hoverBold');
You don't need to take the class off the other elements, because the current element, a:hover.sliderLinks, shares styling with hoverBold
Working example: http://www.jsfiddle.net/MXSkj/1/
Something like this?...
$('#nav li').mouseover(function(){
//remove from others
$('#nav li').removeClass('hoverBold');
//add to this
$(this).addClass('hoverBold')
});
one way to do this would be to remove the hoverBold class on all links and add the it on the current link.
$(".sliderLinks").hover(function(){
$(".sliderLinks").removeClass("hoverBold");
$(this).addClass("hoverBold");
},function(){
//..resume the automatic behaviour
});
Other would be to use the .is() method inside the function passed to $(".sliderLinks").each() to see if its current element
Look at .filter
$(".myMenu").click(function() {
// store current object
var that = this;
$(".myMenu").filter(function() {
// check object in list is not current object
return this != that;
}).removeClass("hoverBold");
});
Basically you pass a filtering function and every object is tested. If the filter returns false (i.e. this == that) then the object is removed from the list.
Given this website: link text
How would one find an element and remove any class=selected and add it to the correct link?
That way when history, models, and the like links will look become selected when clicked upon.
The following code should do the trick in your case..
// when clicking a link inside the sub-navigation list
$('#sub-navigation a').click(function(){
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
});
(it is tested on your example page and it works as expected..)
$("a").click(function(e) {
$("a.selected").removeClass("selected");
$(this).addClass("selected");
});