I’m new to jQuery and struggling with the .toggle() function.
I want to display several <div>-elements in the same position…but only one at the time. If one <div> is opened and a different one is “toggled” it should automatically be closed.
HTML:
$(document).ready(function() {
$("#button1").click(function() {
$("#box1").toggle(1000);
});
});
$(document).ready(function() {
$("#button2").click(function() {
$("#box2").toggle(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class=box1 id=box1>
This is Box 1
</div>
<div class=box2 id=box2>
This is Box 2
</div>
</div>
Box1
Box2
Also, I am pretty sure that I only need one toggle() function and not 4 for the task I am trying to achieve…but trying to call on the same one does not seem to work with my different id/class.
What am I doing wrong/missing here?
Generally, you can use a single document ready function.
In this case, you could also use a single click function to handle your toggles. Since you're using trigger links, you'll need a way to reference the target box, but something like this would work with an additional attribute to get the box name. (You could do it with indexes as well, but for ease of use, I've added a target-box attribute that has the ID of the desired box.)
I've also added the same box class to both divs, you could remove the individual box1/box2 classes since you have IDs that handle differences already.
I've also added a toggle class to the links to give them a more semantic selector and removed the unnecessary 'open/close' duplicates (since toggle is designed to handle both)
jQuery(document).ready(function($){
$('.toggle').on('click', function(){
var targetBox = $(this).attr('target-box'); // Find the target box
$('.box').not(targetBox).hide(1000); // Hide all other boxes
$(targetBox).toggle(1000); // Toggle the current state of this one
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id="box1">
This is Box 1
</div>
<div class="box box2" id="box2">
This is Box 2
</div>
</div>
Toggle Box1
Toggle Box2
Something like this may do the trick for you. You can hide all elements marked in some way, e.g. all elements of a class. In this snippet I added the class "box" to all boxes, and on open, I first hide all boxes in this way, before showing the specified box.
Now clicking open will open the specified box and close any others, and clicking close will close the specified box.
$(document).ready(function() {
$("#button1").click(function() {
$(".box").hide(1000);
$("#box1").show(1000);
});
$("#buttonclose").click(function() {
$("#box1").hide(1000);
});
$("#button2").click(function() {
$(".box").hide(1000);
$("#box2").show(1000);
});
$("#buttonclose2").click(function() {
$("#box2").hide(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id=box1>
This is Box 1
</div>
<div class="box box2" id=box2>
This is Box 2
</div>
</div>
Close Box1
Close Box2
Open Box1
Open Box2
Related
I have several divs which are generating dynamically which share same class names, If I hover on parent(myDiv) need to trigger an event and on hover need to add a class to myDiv(child button) and once I clicked on parent div(myDiv) need to unbind hover action?
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
Tried in the below way
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).unbind('hover');
}).hover(function() {
$(this).find('.myBtn').css('background','#666666');
});
I believe what you are looking for is the .off() function.
Here is the jsFiddle link.
JavaScript:
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).off();
});
$('.myDiv').hover(function() {
$(this).find('.myBtn').toggleClass('active');
});
CSS:
.myDiv {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.myBtn {
display: block;
height: 50px;
width: 100px;
background-color: white;
}
.active {
background-color: gray;
}
I hope this helps.
Not really sure how to phrase that in the title. Anyways, what I'm saying is that I have three divs with the same class name. I want to add a mouseover function that only works on the select div, not all of them at once. For example :(https://jsfiddle.net/1y2jw2y0/) this makes all the divs show/hide, I only want the selected one to act on the jQuery function.
Html:
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
Css:
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide').show();
$('.show').hide();
});
$('.box').mouseleave(function() {
$('.hide').hide();
$('.show').show();
});
});
Use this to target the "selected" element, then select the child with find() or children():
$(document).ready(function() {
$('.box').mouseover(function() {
$(this).children('.hide').show();
$(this).children('.show').hide();
});
$('.box').mouseleave(function() {
$(this).children('.hide').hide();
$(this).children('.show').show();
});
});
JSFiddle Demo
Edited, to outline the performance issues brought up:
For basic details about the difference between find and children, this answer is a good resource.
In this case, I found .find() to be faster as a whole, usually ~.2ms.
After extensive testing, It appears there is very little, or no difference between using find(), or using $('.selector', this)
Overall, the results were similar. In some cases, it appears $('.selector', this) is slower, in others find().
However, find does give you extra functionality that cannot be achieved with $('.selector', this), such as a direct child selector: .selector > .anotherone, or caching the jQuery object to save resources.
Summary: There isn't much difference, it all depends on your case, and what you prefer.
You can do it all in CSS:
.box:hover .hide {
display: block;
}
.box:hover .show {
display: none;
}
Example: http://jsfiddle.net/Zy2Ny/
If you really want to do it in JavaScript, simply use $(this) and find():
More information about whether children() or find() is faster.
$(".box").mouseover(function() {
$(this).find(".hide").show();
$(this).find(".show").hide();
});
$(".box").mouseleave(function() {
$(this).find(".hide").hide();
$(this).find(".show").show();
});
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
</div>
Example: https://jsfiddle.net/1y2jw2y0/5/
Add a 'this' along with the selector,
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide', this).show();
$('.show', this).hide();
});
$('.box').mouseleave(function() {
$('.hide', this).hide();
$('.show', this).show();
});
});
Example: https://jsfiddle.net/1y2jw2y0/6/
So basically you have to select the child selector of the mouse hovered element instead.
NOTE:- You can do this using find() & children() jquery API's as well. But it's bit slower than selecting directly.
And why not doing with pure css? See the example below,
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide,
.box:hover > .show {
display: none;
}
.box:hover > .hide {
display: block;
}
Example: https://jsfiddle.net/1y2jw2y0/3/
Change your syntax to
$('.box').mouseover(function() {
$(this).find('.hide').show();
$(this).find('.show').hide();
});
Just navigate from the current element which trigerred the event to its child elements using $(this)
The problem is that your selector is targeting all of the divs with that class name in the document. You need to limit the scope to just the divs inside of the box you care about. One way to do this would be
$(this).find('.hide').show()
Instead of
$(".hide").show();
See here https://jsfiddle.net/1y2jw2y0/1/
You can see: $('.box') select all .box div.
So that $('.hide') select all .hide p => when you click on a box, all .hide p are affected.
You can fix as following code:
$(this).select('.hide').hide()
$(this).select('.show').show()
I have several nested div-s and I would like to mark only one of them active when the mouse is over that element. The following code isn't work for every situation.
Code sample:
Red -> container
Green -> outer
Yellow -> inner
Blue ->active
The most inner div with the mouse should have the blue background only.
It works only for very few interactions and most of the times it fails. What would be the best and less resource heavy solution for this problem?
function markActive($el) {
$el.addClass('active');
$el.parent().triggerHandler('inactive');
}
function markInActive($el) {
$el.removeClass('active');
$el.parent().triggerHandler('active');
}
$('div').on({
mouseenter: function() {
markActive($(this));
},
mouseleave: function() {
markInActive($(this));
},
inactive: function() {
markInActive($(this));
},
active: function() {
markActive($(this));
}
});
div {
clear: left;
float: left;
padding-left:20px;
height: 400px;
background: #f00;
}
div div {
height: 125px;
background: #0f0;
}
div div div {
width: 280px;
height: 50px;
background: #ff0;
}
div.active {
background: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="outer">
<div class="inner">
<span>Most inner #1</span>
</div>
<div class="inner">
<span>Most inner #2</span>
</div>
</div>
<div class="outer">
<div class="inner">
<span>Most inner #3</span>
</div>
</div>
</div>
Usually what we do need is mouseenter and mouseleave events, those aren't fired when user enters (ou leaves) a child element. In your case you need the old mouseout and mouseover events, that are trigged in that cases.
In the comments you've post a working fiddle: https://jsfiddle.net/ddsxxeer/1/
:)
I have a parent div "total" in which, there are two children divs namely, "some" and "box". When I click on the link in the div "some" (child-1), the "box"(child-2) must be displayed with width: 100%; and if I click on other parent link, the current "box" (child-2) must be hidden. Also, the paragraph tag must not be hidden when the click button is clicked(as in position: relative).
Here is the fiddle to work this out.
The following lines are the code I tried.
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
check this if it solve your problem jsfiddle
i added this
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
add the css
.box {
width: 100%;
float: left;
position: absolute;
height: 200px;
background: orange;
top: 70px;
left: 0px;
clear: both;
}
My solution would be putting each .box outside of the floating .single and reference them with an data attribute.
<div class="total">
<div class="single">
<div class="some"><a class="click-btn" href="#" data-box="box1">click</a></div>
</div>
<div class="clearfix"></div>
<div class="box" data-id="box1">Box 1</div>
</div>
And the box css
.box {
width: 100%;
height: 200px;
background: orange;
display:none;
}
If you set the display none in css you don't have to use $('.box').hide(); on dom ready.
Since you hide all .box elements on click, the toggle function won't work. To toggle the box if you click the active link again you can use the .not() function of jQuery which will take out an element of the collection.
Alltogether the JS would look like:
$(".click-btn").on('click', function(e) {
e.preventDefault();
var boxId = $(this).data('box');
var activeBox = $('[data-id="'+boxId+'"]');
$('.box').not(activeBox).hide();
activeBox.toggle(1000);
});
I'm using e.preventDefault(); what will prevent the default browser action for clicking a link.
Here is a fiddle: http://jsfiddle.net/mrvtwpjp/40/
What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(
Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.
How about using onmouseover, that's not jQuery.