I'm working on an accordion style video section. I'm currently trying to check if a class exists on click. I want it to only open 1 section at a time, so I need to
Check if the class exists on click
If it does, remove class
Add class to the clicked element
I tried doing this with just addClass(); and toggleClass(); but am not 100% sure on what I'm missing.
Add Class
$(".contents-row").click(function(){
$(this).toggleClass("content-open");
});
Toggle Class
$('.contents-row').click(function(){
$(this).toggleClass('content-open');
});
This is the basic HTML set up
<div class="contents-row">
<div class="content-option press">
<div class="class-section-title">test1</div>
</div>
<div class="drop">
test 1
</div>
</div>
A full version of the drop down in on JSFiddle.
Thanks for the help!
First remove content-open class from all elements having content-open class. Then add the class to clicked element like following.
$('.contents-row').click(function(){
$('.content-open').removeClass('content-open');
$(this).addClass('content-open');
});
You need to remove the class content-open from all div with class contents-row first and then add to the currently clicked div.
$('.contents-row').click(function(){
$('.contents-row').removeClass('content-open');
$(this).toggleClass('content-open');
});
Related
I have a button, when clicked I would like the body to get the class "open-menu". With jQuery it was very easy, all I had to do what was add this line of code
$('.burger').click(function() { $('body').toggleClass('menu-open'); }); };
But I don't understand how I can achieve that in Angular with typescript! All the info I can find online pertains to toggling a class on the same element!
Just add a boolean property to your Component Class:
menuOpened: boolean = false;
Once the button is clicked, you need to do two things:
Toggle the menuOpened:
<button (click)="menuOpened = !menuOpened">Click to Toggle Menu</button>
Add the class conditionally:
<div [class.menu-open]="menuOpened"></div>
Here's a Working Sample StackBlitz for your ref.
goes without angular simply: document.body.classList.add('menu-open');
to remove: document.body.classList.remove('menu-open')
DEMO
Below is an example of a simple working accordian.
HTML
<div class="Accordian">
<div class="Btn">BUTTON
<div class="Icn"><i class="Up"></i></div>
</div>
<div class="Content">CONTENT</div>
</div>
JQUERY
$(function ($) {
$('.Accordian').find('.Btn').click(function () {
var $content = $(this).siblings('.Content').slideToggle('fast');
$('.Content').not($content).slideUp('fast');
//How to toggle only child of clicked?
$('.Icn i').toggleClass('Up').toggleClass('Down');
});
});
The problem is simple. Class .Up/.Down will be css icons that toggle on click.
Currently my code toggles all classes named up/down.
QUESTION
How to target only the child class of the clicked element and apply appropriate class?
How I suspect it should work:
onclick
If accordian closed
- Apply class .Up to clicked element.
- Apply class .Down to all closed elements.
Else
- Vice versa
Find element .Icn i in clicked elements context.You need to use:
$('.Icn i').not($(this).find('.Icn i')).removeClass('Down').addClass('Up');
$(this).find('.Icn i').toggleClass('Up').toggleClass('Down');
Working Demo
I can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.
<li>
<div class="yearaction year1">
</div>
2007
</li>
<li>
<div class="yearaction year2">
</div>
2008
</li>
<li>
<div class="yearaction year3">
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
This implementation doesn't affect the other links. How do I make this toggle work correctly?
You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
You have to toggle it individually. A good workaround is to attach data-* to each link.
Then
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});
It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});
It doesn't affect the other links because by using:
$(this)
you are referring only to that particular instance of .gotoslide class (the one that was clicked).
To affect all the other elements with .gotoslide class, refer to them with:
$('.gotoclass')
You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});
You have to first clean up the other links and then set the clicked link to the correct class.
Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Working example here: http://jsfiddle.net/hVLML/4/
I have this code.
<div class="1st-class"></div>
and I have a button, when I click it, the div will be like this.
<div class="1st-class goto"></div>
Now, how can I check the div if the class name has goto?
Give the div an id :
<div id="target" class="1st-class goto"></div>
Then do:
if ($('#target').hasClass('goto')) {
alert('Has class goto');
}
Note: You don't need to give the div an Id. You can use the .1st-class selector as well. However, giving it an Id makes it uniquely identifiable if you have multiple divs with the class 1st-class.
References:
jQuery hasClass()
OK, I know how to add class as well as detect the class of the div in jQuery but now I want to get the class name of the child inside the parent div and then add a class or id to the parent div that hold the child div.
example:
<div>
<div class="childdiv">this is the child divident</div>
</div>
after the div child class has been get or detected then add class or id to the parent div (in my case, I use class)..
the output should be:
<div class='parentclasshasbeenadded'>
<div class="childdiv">this is the childdiv</div>
</div>
This just an experiment, once this succeed then I'm going to apply this to my actual big bang project, please help me, thanks in advance.
PS: I'm open to any suggestions, recommendations and ideas.
You could also do
$('div :has(".childdiv")').addClass('parentclasshasbeenadded');
$('.childdiv').parent().addClass('parentclasshasbeenadded');
Above will add class=parentclasshasbeenadded to parent of .childdiv
and to add id:
$('.childdiv').parent().attr('id', 'someid');
To detect class exists you need to use hasClass()
$('div').children().each(function() {
if($(this).hasClass('childdiv')) {
// to add class
$(this).parent().addClass('parentclasshasbeenadded');
// to add id
$(this).parent().attr('id', 'someid');
}
});
if($(this).children().hasClass("childdiv")) {
$(this).addClass("Thaparentclasshasbeenadded")
}
this might help to figure things out.
$('.parent .child')[0]{
//there is
}