I want add class to my div but I have so many div and any time clicked button just add or remove on one div in html how can I do? is there any way to use value or id? such as that link in command
if you lock i have to button to show&hide dive but no matter which one is clicked it's just add class to first one
You can have many divs with the same class but if your looking to do something more specific to a particular div you have to use id or a seperate class. Read more about CSS selectors
<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
.blue{
text-align: center;
}
#standout{
text-overflow: ellipsis;
}
Add a class (or id) to the button like this:
<button class="foo-class" id="foo-id">Click me</button>
And then you can access the click on the button with the following javascript:
// class
document.querySelector('.foo-class').click(
// do something
);
// id
document.getElementById("foo-id").click(
// do something
);
See here for reference the id and here the reference for class.
If you mean for toggle class slow you can use e.target with next() for toggle element like:
$('.toggle').click(function(e) {
$(e.target).next().toggle('slow');
});body {padding:30px;}
#target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test1</p>
</div>
</div>
<div>
<button class="toggle">Show & Hide</button>
<div>
<p>test2</p>
</div>
</div>Or you can use data-target like:
$('.toggle').click(function(e) {
$('#'+ e.target.dataset.target).toggle('slow');
});body {padding:30px;}
.target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show & Hide</button>
<div id="target-1" class="target">
<p>test1</p>
</div>
</div>
<div>
<button class="toggle" data-target="target-2">Show & Hide</button>
<div id="target-2" class="target">
<p>test2</p>
</div>
</div>Another rule you must learn, id must be unique.
Reference: