I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.
you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>
You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}
Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>
You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))
Related
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
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:
Event.target
.next()
Using data attributes
id
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.
I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});
I want to add a class to multiple div elements with same class, but not add the same class for all.
(all the div elements are created with jquery, not manually in html so i don't know if the value inside the div will be "Yes" or "No", it's "random")
Example
html:
<div class = "flag"> Yes </div>
<div class = "flag"> No </div>
<div class = "flag"> Yes </div>
<div class = "flag"> Yes </div>
<div class = "flag"> No </div>
css:
.yes{
color : green;
}
.no{
color : red;
}
I want to apply .yes for div with "Yes" and .no for div with "no".
i tried this but not working, or it apply .yes for all div:
$(".flag").each(function(){
if($(".flag").text() == "yes"){
$(".flag").addClass("yes");
}else{
$(".flag").addClass("no");
}
});
There's a couple of issues here.
You select every .flag element when you add the classes, not the one in the loop iteration. Use the this keyword to fix that.
The content is Yes, not yes, and JS is case sensitive.
The content also contains whitespace which needs to be removed before the comparison. You can use trim() for that.
$(".flag").each(function() {
if ($(this).text().trim() == "Yes") {
$(this).addClass("yes");
} else {
$(this).addClass("no");
}
});
.yes { color: green; }
.no { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
<div class="flag"> Yes </div>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
However you can achieve this much more simply by using an implicit loop, by providing a function to addClass() and a ternary expression:
$(".flag").addClass(function() {
return $(this).text().trim() == "Yes" ? 'yes' : 'no';
});
.yes { color: green; }
.no { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
<div class="flag"> Yes </div>
<div class="flag"> Yes </div>
<div class="flag"> No </div>
I have a set of div elements inside a container, .div-to-hide is displayed by default whilst .div-to-show is hidden.
When I click in .set, .div-to-hide should hide and .div-to-show should be visible. Next click should return the previous clicked element to its default state.
I need to display to buttons on click inside on .div-to-show.
<div class="container">
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
<div class="set">
<div class="div-to-hide">Some text</div>
<div class="div-to-show"></div>
</div>
</div>
So far I have this:
let lastClicked;
$('.container').on('click', function(e) {
if (this == lastClicked) {
lastClicked = '';
$('.div-to-hide').show();
$(this).children('.div-to-hide').hide();
} else {
lastClicked = this;
$('.div-to-hide').hide();
$(this).children('.div-to-hide').show();
$(this).children('.div-to-show').hide();
}
});
Can't get it to work properly tho.. I don't know what I am missing...
Any help is deeply appreciated!
UPDATE: got it working! Thanks everyone!
First, you are not using delegation (second parameter on the $.on() function) to define the .set element as your this inside the function.
If I understood correctly, you want to show the elements on the last one clicked and hide the rest. You don't really need to know which one you last clicked to do that
$('.container').on('click', '.set', function (e) {
// Now "this" is the clicked .set element
var $this = $(this);
// We'll get the children of .set we want to manipulate
var $div_to_hide = $this.find(".div-to-hide");
var $div_to_show = $this.find(".div-to-show");
// If it's already visible, there's no need to do anything
if ($div_to_show.is(":visible")) {
$div_to_hide.show();
$div_to_show.hide();
}
// Now we get the other .sets
var $other_sets = $this.siblings(".set");
// This second way works for more complex hierarchies. Uncomment if you need it
// var $other_sets = $this.closest(".container").find(".set").not(this);
// We reset ALL af them
$other_sets.find(".div-to-show").hide();
$other_sets.find(".div-to-hide").show();
});
Consider using class toggling instead.
$('.set').on('click', function(e) {
$('.set').removeClass('hidden-child');
$(this).addClass('hidden-child');
});
css:
.hidden-child .div-to-hide, .div-to-show {
display: none;
}
.hidden-child .div-to-show, .div-to-hide {
display: block;
}
This will make your code easier to reason about, and lets css control the display (style) rules.
Edit: changed class name for clarity; expanded explanation; corrected answer to conform to question
Try to make use of siblings() jQuery to hide and show other divs and toggle() jQuery to show and hide itself and also you will need to set click() event on .set, not in .container
$(document).on('click', '.set', function(e) {
$(this).find('.hide').toggle();
$(this).find('.show').toggle();
$(this).siblings('.set').find('.hide').show();
$(this).siblings('.set').find('.show').hide();
});
.show {
display: none;
}
.set div {
padding: 10px;
font: 13px Verdana;
font-weight: bold;
background: red;
color: #ffffff;
margin-bottom: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="set">
<div class="hide">1 Hide</div>
<div class="show">1 Show</div>
</div>
<div class="set">
<div class="hide">2 Hide</div>
<div class="show">2 Show</div>
</div>
<div class="set">
<div class="hide">3 Hide</div>
<div class="show">3 Show</div>
</div>
</div>
How can I write in jQuery this:
If .horse is visible, then add #cat to .dog (but only to .dog which is child of the visible .horse)?
<div id="tabs-1" class="horse" style=" margin-right: 20px; display: none;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
<div id="tabs-2" class="horse" style=" margin-right: 20px; display: block;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
Use following, it will work
$('.horse:visible .dog').attr('id','cat')
If you want to add the ID cat to .dog, use this:
$(".horse:visible .dog").attr("id", "cat");
Here is an example.
Try,
$('.horse:visible .dog').append($('#cat'));
The above code would append #cat into .dog which is a descendant of visible .horse
If you want to add id to the particular element then do,
$('.horse:visible .dog').attr('id','cat');
We can combine jQuery's :visible selector with jQuery's attr() method to set the id:
$('.horse:visible .dog').attr('id', 'cat');
This will give the .dog element contained within your visible .horse element an id of "cat".