I'm having a few tooltips on an image. I want to slide open a div (with text) if a tooltip is clicked. This is working fine using the code below.
The part I can't figure out: I also want to close any open "tooltip_content" if I press any of the tooltips.
I did build this before (with display/hide) but am out of ideas how to do it using a slide-effect.
<div class="tooltip">
<div class="inner"></div>
<div class="tooltip_content">Text</div>
</div>
$(".tooltip .inner").click(function(){
$(this).next().slideToggle();
});
You can add one more line :
$(".tooltip .inner").click(function() {
$('.tooltip_content:visible').not($(this).next()).slideUp();
$(this).next().slideToggle();
});
.tooltip_content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
<div class="inner">inner1</div>
<div class="tooltip_content">Text1</div>
</div>
<div class="tooltip">
<div class="inner">inner2</div>
<div class="tooltip_content">Text2</div>
</div>
<div class="tooltip">
<div class="inner">inner3</div>
<div class="tooltip_content">Text3</div>
</div>
The jQuery object $('.tooltip_content:visible') will look for the visible tooltip_content div and if it finds one or more, it will slide them up but excluding the current objects next item with .not($(this).next()).
$(".tooltip_content").click(function(){
$('.tooltip_content:visible').slideToggle();
});
use this code will make your effect.
Related
I am trying to simply achieve the show/hide feature on hover using the hover function of jquery.
However not able to show and hide the particular div. When I hover over the current span tag I want only the current(closest) div to hide and the closest or next possible div to be shown.
But currently since the class names are same, it is showing all the divs
FIDDLE HERE
HTML structure:
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
<div class="parentCat">
<div class="imageContainer">
<span class="hoverEffect">Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
If you shift the event to the parent element, everything becomes simpler:
$('.ca').hover(function () {
$('.imageContainer', this).hide();
$('.showContainer', this).show();
}, function () {
$('.imageContainer', this).show();
$('.showContainer', this).hide();
});
Updaated working example.
If you want this effect, you need to alter your code. The div which has the hover event can't be one that you are hiding. It is also good practice to nest the related divs INSIDE of a parent div. I believe this is what you are looking for.
HTML
<div class="ca hoverEffect" style="height:40%">
<div class="imageContainer">
<span>Some Image</span>
</div>
<div class="showContainer">
<span>New Image</span>
</div>
</div>
JS
$('.hoverEffect').hover(function () {
$(this).find('.imageContainer').hide();
$(this).find('.showContainer').show();
}, function () {
$(this).find('.imageContainer').show();
$(this).find('.showContainer').hide();
});
Working jsfiddle
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I would like it so when I click on a Bootstrap Glyphicon a div is displayed.
I currently have this HTML (simplified):
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
Then this JS:
$('#headerdisplaybuttonsxs').click(function()) {
$('#headerrightside').css("display", "block");
});
So I would basically like #headerrightside to display on the clicking of #headerdisplaybuttonsxs. Problem is I can't get that to work.
#headerdisplaybuttonsxs Has a CSS property of display:none.
I have tried $('#headerrightside').show() but that does not seem to work. How could I get this to work? Thank You!!
There was a typo on the click event function with an extra ).
$('#headerdisplaybuttonsxs').click(function() {
$('#headerrightside').css("display", "block");
});
#headerrightside {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
I'm trying to fade the Movies div of this HTML
<div class="row">
<div id=Movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
and I'm using this jquery code
<script>
$(function(){$("#Movies").show("slow");
});
</script>
I've also tried this:
<script>
$(document).ready(function(){$("#Movies").fadeIn(3000);
});
</script>
But it ain't working. The page loads with no fade in. The div just loads like every other element. What's wrong with this?
Add this CSS to make it hidden, then only it will fadeIn slowly when the page loads
#Movies {
display:none;
}
For that to work; #movie has to be hidden, then show when the document is ready as the jQuery function implies.
$(document).ready(function() {
$("#movies").fadeIn(3000);
});
#movies {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id=movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
First you have to hide the movies div and then fade in. Also i see that your id "Movies" is not withing quotes in the question code snippet. Hope it helps.
Html
<div class="row">
<div id="Movies" class="col-md-4" style="display:none">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
Javascript
$(document).ready(function(){
$("#Movies").fadeIn(3000);
});
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......