Develop Reference

Javascript Toggle a class on clicked class element

Bit of a basic one, I was unable to to find exactly what I was after on Stack/Google..
Using vanilla javascript, I'm looking to simply toggle a class on the below .barBtn elements, specifically the one I click.
Sample JS Fiddle: https://jsfiddle.net/t376kL4q/
<div class="container">
<div class="btnBar">
<div class="barBtn">Wishlist</div>
<div class="barBtn">Collection</div>
<div class="barBtn">Info</div>
</div>
</div>
<div class="container">
<div class="btnBar">
<div class="barBtn">Wishlist</div>
<div class="barBtn">Collection</div>
<div class="barBtn">Info</div>
</div>
</div>
I have tried adapting others' code found on Stack/Google, e.g. this one which I've JSFiddle'd: https://jsfiddle.net/5rmqucj3/
Where I changed
document.getElementById("mytarget").
to
document.GetElementsByClassName("mytrigger").
(or even 'querySelector')... but I'm not sure how to correctly target the specific class element I click.
Whether or not the above (2nd link) is the best way to go about the JS of this I'm not sure, but generally just after a clean/simple way of achieving this.
Any help would be much appreciated.
Thanks

You need this
var navclick = document.getElementsByClassName("mytrigger");
for (var i = 0; i < navclick.length; i++) {
navclick[i].onclick = function(e) {
this.classList.toggle('myactive');
}
}
.myactive {
background-color: blue;
color: white;
}
<button class="mytrigger">Button
</button>
<div id="mytarget">
<p>Hello</p>
</div>
<button class="mytrigger">Button
</button>

hide/show div using id property with index in javascript

Here Iam facing issue with toggling the div containers. if I click on video button, other divs should close, only if open. because of toggling, if it close already, its opening on click of particular btn.can you help me?
html:
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" id="clinicShow{{i}}">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" id="videoappointmentShow{{i}}">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" id="inclinicappointmentShow{{i}}">
Incliniccalendertimeslot
<div>
</div>
component.ts
index: any;
appointmentToggle(doctor,type,index){
if(type == 'video'){
$("#appointmentShow"+index).toggle();
//here i need to check condition whether its already opened or not, if open, then it should toggle.
$("#clinicShow"+index).toggle();
}
if(type == 'clinic'){
if(this.index==undefined){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index=index;
}else if(this.index == index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
index = undefined;
}else{
$("#clinicShow"+this.index).toggle();
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index= index;
}
}
clinicdetails(index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
}

There are going to be a lot of ways to do this. I'd probably create an array of boolean values to show/hide stuff.
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" *ngIf="hideVideo[i]">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" *ngIf="hideVideo[i]">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" *ngIf="hideClinic[i]">
Incliniccalendertimeslot
<div>
</div>
Then you're Component file can have a boolean array:
hideVideo: boolean[] = [];
hideClinic: boolean[] = []
Whenever doctordata is initialized also initialize the array:
doctordata.forEach(() => { this.hideVideo.push(false);this.hideClinic.push(false); });
You're appointment toggle can be something like this:
appointmentToggle(doctor,type,index){
if(type == 'video'){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
}
clinicdetails(index){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
This is incredibly rough and untested.
Edit: Here is working code. This version is less rough and untested:
https://stackblitz.com/edit/angular-ivy-xtz8xv?file=src%2Fapp%2Fapp.component.ts
I used the same concept that I used above. However, I think the code would be more ideal if you could introspect your doctordata objects to determine if it should be displayed or not instead of keeping a second array. However, there is also a good argument about not letting display specific logic clutter up your data model objects.

It looks like your logic would be simpler if you use show() and hide() instead.
Especially because hiding a hidden element is okay and has no effect...
Look at: jQuery Effects - Hide and Show
If the first thing you do is hiding the old index (if any) you only need to show the new...

In the jquery when showing a div and hiding it. I think you don't need an if ... Else condition
Try this code:
$(".btn).click(function(){
$("div").toggle();
});
Once that .btn is click div will show and if u want to hide it just click the button again
I also try to combine javascript and jquery before but it didn't work out well.
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
Just add this to your header and you are good to go and it's much easy? Hope this works for you

OnClick event for div inside lots of container Divs

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.

One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>

Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});

Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle

How to get DIV ID on click

I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.

With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo

Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.

Why isnt my Jquery background image switching?

Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back

Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?

Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.