Jquery Collapse/Display Divs - Close all other elements then open selected item - javascript

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/

Related

Add/Remove class based on URL slug

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

How to change the class of a <li> element after clicking on a tab

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

Changing :before sign when slidedown Bootstrap

I have navbar from bootstrap in sidebar and I want to change :before sign on click on element in my menu. But I have problem... It's looks like:
But I want to change "+" sign to "-" after click. It should looks like it:
This menu have 2depth. U can see it how it works on port.cruzzapps.com
It's my JS, but this code not working propely:
$(document).ready(function(){
$(".collapse li a").click(function(event){
$('.collapse li a').removeClass();
$(this).addClass('minus');
event.preventDefault();
});
});
Let's change your code to this:
$(document).ready(function(){
$("li a").click(function(event){
$(this).toggleClass('collapse');
$(this).toggleClass('minus');
event.preventDefault();
});
});
I'm using toggleClass so that way when you click it again, the original class is added back and the new class is removed. What this code does is when an anchor tag in a list is clicked, it loses it's collapse class and gains a minus class. When it is clicked again, it loses it's minus class and gains the collapse class. If you've set up your CSS properly this will give you the effect you want.
Note I also changed your selector inside the click handler to not select every .collapse li a as that was changing all of the elements rather than just the one you wanted.

jQuery generating content from generated content

I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});

JQuery: Making a tab active

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

Categories

Resources