Hiding a DIV by click on another DIV - javascript

I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data:
this is my div :
<div id="go" style="position: relative">Click</div>
<div id="example" style="position: relative"></div>
and the script:
$("#go").click(function () {
$("#example").fadeIn(1200);
$("#count").text('');
setInterval(
function () {
p(); count();
}, 8000);
});
and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?

You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:
$("#example").fadeToggle(1200);
Fiddle Demo

Did you try .toggle()?
Reference is at jQuery docs. AFAIK it does all you need - including animation.

Use .toggle(). Check this
$("#example").hide();
$("#go").click(function () {
$("#example").toggle('slow');
});
DEMO

Related

Hiding a div onmouseout

Hi guys I was making a javascript function for dismissing or hiding a div Ive search through the internet and found some answers but it does not apply on my code
Here is my code:
<script>
function Displayout()
{
$("#siteicon").mouseout(function () {
$("#map_tooltip").hide("drop", { direction: "down" }, "slow");
});
}
</script>
And here is the div that will trigger the function
<div id='siteicon' style="background-image:url('src/images/redbutton.png');margin-top:0px;margin-left:-8px;height:10px;width:10px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="Displayout();"></div>
UPDATE:
and here is the id of the div I want to hide
<div id='infocontainer'></div>
Thank you in advance
Seems like there is syntax wrong with your hide() method. Try this:
function displayData()
{
$("#map_tooltip").show("slow");
}
function displayOut()
{
$("#map_tooltip").hide("slow");
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id='siteicon' style="background-color:grey;margin-top:0px;margin-left:-8px;height:20px;width:60px;background-repeat:no-repeat;" onmouseover="displayData();" onmouseout="displayOut();">SiteIcon</div>
<div id='map_tooltip' hidden="true">Should be hidden on mouseout of #siteicon</div>
The parameters for hide are wrong, it's giving error "Uncaught TypeError: n.easing[this.easing] is not a function". You can use "slow" to slow up the hiding effect but you can't specify the direction. You order is wrong as well. Please have a look at JSFiddle for Demo and api.jquery.com for for hide function.
You don't need onmouseout since you are using JQuery, and there seems to be a problem in the hide() of yours, so try removing the parameter inside.
$('#test').mouseout(function() {
$(this).hide();
})
#test {
height: 200px;
width: 200px;
background-color:pink}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">content</div>

Pop-up Div to appear on hover of button

I am creating a website where i want to display a div on hover of a button. Currently i am able to do this but it's not the desired effect. I have created a DEMO in jsfiddle to show what i have achieved and i will paste my HTML, jQuery and only the CSS which is pertaining to this question.
HTML
<div class="cart-btn" >CART
</div>
<div class="minicart" >
Items : 5
Total : $250
VIEW CART
</div>
jQuery
$(document).ready(function () {
$(".cart-btn").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
});
CSS
.minicart {
width:164px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
margin-left:450px;
margin-top:30px;
}
ISSUE: The desired effect i want is, "The div should slide from under the button" and dissapear in the same manner".
However my main concern is that the div should remain focused even when i hover over it. Currently it disappears as soon as i take my mouse away from the button. The div once displayed should remain displayed unless the user takes the mouse away either from the div or button.
A few things to note, when using absolute positioning use top instead of margin-top and so on.
Second to avoid the popup folding up when you leave the button use the following selector:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Use slideDown and slideUp as BeNdErR sugested, here's an updated version of his fiddle
Wrap both button and div in another div. The use this div for hover-event.
<div id="cbutt">
<div class="cart-btn" >CART
</div>
<div class="minicart">Items : 5 Total : $250 VIEW CART
</div>
</div>
$(document).ready(function () {
$("#cbutt").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
})
Here is a fiddle:
http://jsfiddle.net/Ncj2E/
Hope this is what you wanted.

jQuery - hide div, then show on click

So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

How to show/hide a div on mouseover? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to show/hide a div on mouseover using jquery?
I have a div like this:
<div id="parent">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
I want to have the child div shown whenever someone moves their mouse over the parent div, and when he moves his mouse away, to hide the parent div.
However if I do this:
$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
console.log('here');
$("#child").toggle();
}
Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?
$("#parent").hover(
function(){
$("#child").show();
},
function(){
$("#child").hide();
}
)
How about add css?
#parent #child{display:none;}
#parent:hover #child{display:block;}
with
<div id="parent">
foo
<div id="child" >
hidden
</div>
</div>
You shouldn't use toggle in this case. If you always want to hide on mouseout and show on mouseover, then define them as such :)
$("#parent").mouseover(function() {
$("#child").fadeIn(); // or .show() for no fading
});
$("#parent").mouseout(function() {
$("#child").fadeOut(); // or .hide() for no fading
});
Don't use toggle function !!
Try something like this:
$("#parent").hover(function(){
$("#child").show();
}, function(){
$("#child").hide();
}
)
This should probably work!!
Shorter:
$("#parent").hover(function () {
$("#child").toggle();
});​
Demo.
Note: You can subtitute toggle with fadeToggle or slideToggle.
You can try .hover() like this,
$('#divid').hover(
function(){
//mouseenter function
},
function(){
//mouseleave function
}
);
You should use something like this:
$("#parent").mouseover(function(){
$('#child').show();
});
$("#parent").mouseout(function(){
$('#child').hide();
});​
jsFiddle example: http://jsfiddle.net/phcwW/
<div id="parent" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
Js Method:
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}
function callMouseOut(){
document.getElementById("child").style.display = "none";
}

Categories