Jquery: Show related div when you click and hide others - javascript

I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.
jsfiddle
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$('div.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
HTML
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>
<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>

Make the script understand its relation. Change it to:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$this = $(this);
$('div.tip-2').fadeOut(200, function () {
$this.next('div.tip-2').fadeIn(200);
});
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
Fiddle: http://jsfiddle.net/praveenscience/g25hsdw6/4/

Try this
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next().fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
updated Fiddle

Please try this:
$('div.tip-2').hide();
$('.showDiv').on('click', function() {
$("div.tip-2").hide();
$(this).next('.tip-2').fadeIn(200);
event.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('div.tip-2 *')) {
$("div.tip-2").fadeOut(200);
}
});
http://jsfiddle.net/Rino_Raj/g25hsdw6/5/

Related

how to hide parent when click anywhere outside the child element

I have this code
<style>
.Parent {width:500px;height:500px;background:#000}
.Parent .Child {width:250px;height:250px;background:#F00}
</style>
<div class="Parent">
<div class="child"></div>
</div>
<script>
$(document).ready(function() {
$('.Parent').click(function () {
$(this).hide()
});
/*
But if i click on <div class="Child"></div> ,
<div class="Parent"></div> won't get hidden .
*/
});
</script>
I want my code to hide'.parent',
When I click on areas in .Parent witch doesn't include .Child elementand if the areas I click was included in '.child' area , it don't do anything .
so what would u guys suggest ?
Simply make of event.stopPropagation(); to stop event of child from propagating to parent.
So script becomes:
$('.Parent').click(function () {
$(this).hide();
});
$('.child').click(function (e) {
e.stopPropagation();
});
See the fiddle: "http://jsfiddle.net/sftknxeo/1/"
just do this:
$('.Parent, .child').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});
$('.Parent, .child').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='Parent' style='width:auto; padding:50px; border:red solid 1px;'>
<div class='child' style='width:200px; height:200px;border:green solid 1px;'>
child
</div>
</div>
You can use the event's target to determine what you have clicked on. This way you can also assign an event to happen if you have clicked on the child. (If need be.)
$('.Parent').click(function(e){
if(e.target == this){
$(this).hide()
}
});
DEMO
Quick and dirty version would be simply to add another event handler. Add a click handler to child that hides parent. Then if you click on parent, it hides itself, and if you click on child, it hides parent.
$('.child').click(function (e) {
$('.parent').hide();
});
Not the most elegant solution, sure, but it's quick and easy and should get the job done.
$('.Parent').click(function () {
$(this).css("visibility", "hidden");
$(".Parent" ).children().css("visibility", "visible");
});
If you just want to hide parent then it will do the needful.
Check for the clicked element by looking at the target property of the event object. Here is something you might want to do:
$(function () {
$('.Parent').click(function (e) {
if ($(e.target).hasClass("child")) {
return false;
}
$(this).hide();
});
});
$('.parent').click(function(e) {
if ($(this).hasClass('child')) {
return false;
}
$(this).hide();
});

Javascript links stopped working, can't figure out why

I have a website that is using js to switch between two different navigation menus. It has always worked up until a week ago or so and I can't figure out why. Wondering if anyone here can point something out to me that I'm not seeing.
Here's my markup:
<div class="catMenu">
Works
</div>
<div class="newboxes" id="newboxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href="javascript:showonlyone('newboxes2');" >About</a>
</div>
<div class="newboxes" id="newboxes2" style="display:none;">
...the 2nd menu
</div>
And Here's my js:
$(document).ready(function() {
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
When I look at my console using firebug, I get the following error:
ReferenceError: showonlyone is not defined
but with my lack of knowledge about js, I'm not entirely sure how to fix this.
Can anyone shed some light?
If you're going to invoke the showonlyone function using href="javascript:showonlyone()" you'll have to define it in the global scope, currently it's defined inside your document.ready() function.
You can also expose it explicitly using the window keyword:
$(document).ready(function() {
window.showonlyone = function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
Building on haim770's answer
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
$(document).ready(function() {});
Try this:
$(document).ready(function() {});
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
You're using jQuery, so move your inline JavaScript out of your HTML and use a data attribute to store thechosenone variable. Then you can use jQuery to add click methods to your anchors, grab the variable from the data attribute and run the rest of the code.
HTML
<div class="catMenu">
<a data-chosen="newboxes1">Works</a>
</div>
JS
$(document).ready(function() {
$('a').click(function () {
var thechosenone = $(this).data('chosen');
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
DEMO
While your format is close to working and haim770 has already shown the problem, I would change your format a bit, here. Try this:
<div class="catMenu">
<a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
$(document).ready(function() {
$(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
$(".newBoxes").each(function(){
if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
$(this).show();
else
$(this).hide();
});
e.preventDefault(); //Prevent browser's default action for anchor clicks
return false;
});
});
Thanks Andrew!
HTML
<div class="catMenu">
Works
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href='#' id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
JS
$(".ToggleDisplay").click(function(e){
var BoxToDisplay = $(this).prop("id").replace("Link", "");
$(".newboxes").each(function(){
//Check if this is the right one to display
if ($(this).prop("id") == BoxToDisplay)
$(this).show();
else
$(this).hide();
});
e.preventDefault();
return false;
});
FIDDLE

jquery show hide multiple divs on click - want hide the trigger clicked link after click

I'm using this code to show/hide multiple divs: FIDDLE
HTML
<ul class="fade_text">
<li><h4>Was ist ein Teleskop?</h4>
<div id="astro-1" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Lichtsammelvermögen</h4>
<div id="astro-2" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Grenzgröße (der schwächsten erkennbaren Sterne)</h4>
<div id="astro-3" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Auflösung(svermögen)</h4>
<div id="astro-4" class="showHideDiv">
Some Content
</div>
</li>
<li><h4>Vergrößerung</h4>
<div id="astro-5" class="showHideDiv">
Some Content
</div>
</li>
</ul>
JS
$(document).ready(function () {
function showHideDivs() {
$('.showHideDiv').each(function () {
if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
$(this).show();
} else {
$(this).hide();
}
});
}
$('a.toggle').click(function () {
var addExpanded = !$(this).hasClass('expanded');
$('a.toggle').removeClass('expanded');
if (addExpanded) {
$(this).addClass('expanded');
}
showHideDivs();
});
showHideDivs();
});
Everything is working fine.
My question: I want to hide the link f.e. "Lichtsammelvermögen" after the link is clicked and the text container is shown.
How can I do that?
you can add a hide() call
$(this).hide();
if you want to re-show it when clicking another header you can do this too:
$('a').show();
$(this).hide();
example: http://jsfiddle.net/7pXpK/11/
http://jsfiddle.net/7pXpK/10/
Write $(this).hide() when addExpanded is false.
$('a.toggle').click(function () {
var addExpanded = !$(this).hasClass('expanded');
if (addExpanded) {
$(this).addClass('expanded');
} else {
$('a.toggle').removeClass('expanded');
$(this).hide();
}
showHideDivs();
});

Toggle div on link click

http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>

jquery relative a href="#" remove display block

<li><b>Arbeiten</b></li>
This is the link. When i click this it change the id of the div(#section17) from display none to block.
<li><b>Feiern</b></li>
Now if i click on a other link(#section15) it should change the display:block from #section17 to display:none again and the link(#section15) to display block
The page doesnt reload just the url change a little bit.
Can anyone help me?
<script type="text/javascript">
$("a").click(function () {
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
</script>;
DEMO: http://jsfiddle.net/gvee/qba7e/
HTML
<ul>
<li><b>section 17</b>
</li>
<li><b>section 18</b>
</li>
<li><b>section 19</b>
</li>
</ul>
<div id="sections-container">
<div id="section17">section 17</div>
<div id="section18">section 18</div>
<div id="section19">section 19</div>
</div>
JQuery
$('a').click(function (e) {
// Prevent jumping to anchor
e.preventDefault();
// Hide all other sections
$('#sections-container > div').css('display', 'none');
// Show only one we want
var addressValue = $(this).attr('href');
$(addressValue).css('display', 'block');
});
You have to cancel the link's default behaviour:
$("a").click(function (event) {
event.preventDefault();
var addressValue = $(this).attr("href");
$(addressValue).css("display","block");
});
your code should be like this
<script type="text/javascript">
function HideShow(ctrl) {
var addressValue = $(ctrl).attr("href");
$(addressValue).css("display", "block");
}
</script>
<li><b>Arbeiten</b></li>
<li><b>Feiern</b></li>
If you give all sections a class of sectionClass then hide all elements with this class and show the relevant one on click you should be in business.
$("a").click(function (e) {
e.preventDefault();
var addressValue = $(this).attr("href");
$(".sectionClass").hide();
$(addressValue).show();
});

Categories

Resources