Hide / show div using one button in jQuery - javascript

I am trying to hide one element and show the other when when button is clicked and switch around when it is clicked again.
I came up with something like this but this isn't going to work...
jQuery("#wcvat-toggle").click(function() {
jQuery("#excltaxout").show();
jQuery("#incltaxout").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
However this will always show the #excltaxout. Any suggestions?

To make this work - and assuming that one of those elements starts hidden - you can simply call toggle() on them both at the same time. This will invert their display states.
jQuery(function($) {
$("#wcvat-toggle").click(function() {
$("#excltaxout, #incltaxout").toggle();
});
});
#excltaxout { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>

You can use jQuery's .toggle():
Display or hide the matched elements.
$("#wcvat-toggle").click(() => {
$("#incltaxout").toggle();
$("#excltaxout").toggle();
});
#incltaxout {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
Note however that this only works if one element is hidden by default, if not you will hide/show both at once.

Related

Toggle classes between two different elements

I want to toggle between two classes on two anchor tags. When I click on the non-bold link, I want it to go bold, and then the other go to normal. However I don't really know how to go about it.
I've tried a few approaches:
$(".link").click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2<a>
</div>
Here, I add and remove based on the target and check if that class is present but it doesn't handle the other non-clicked anchor - I need to click that to remove the bolding when it needs to happen automatically.
I then mess around toggleClass():
$(".link").click(function(e) {
$(this).toggleClass("selected");
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
Which is definitely a step closer but I don't understand how to establish a relationship with toggleClass() and more than one element.
Am I going about this the right way or is there something better?
How about this. You can use siblings() method.
$(".link").click(function(e) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
The accepted answer is the right one, but something that should be added:
$(".link").click(function(e) {
var isSelected = $(this).hasClass("selected");
e.preventDefault();
if (!isSelected) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
}
});
Essentially, only perform the toggle action if what you're clicking on is NOT the selected element.
A simpler solution
$(".link").click(function(e) {
e.preventDefault();
$(".link").removeClass("selected");
$(this).addClass("selected");
});
Remove selected class from all .link then add it to the clicked element. This will work for more than 2 links and it is simpler. There is no need to check for selected class or get siblings.

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

Append does nothing

I'm trying to add an element after removing another:
$("a.III").click( function(e) {
var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>';
e.preventDefault();
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul").fadeIn("slow");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">
</span>
Nothing happens after the older div's fadeOut. I assume I'm doing something wrong while trying to append the new element.
Your code works fine, the problem is most likely that you don't have any content in the divs you're removing/appending, so you can't see that it's working. Here's your exact code but with content in the divs so you can actually see the script working(added an anchor with class of III which I'm assuming you forgot to include in your post):
$("a.III").click( function(e) {
e.preventDefault();
var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>';
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul2").fadeIn("slow");
});
});
a.III {
display:block;
margin-bottom:20px;
}
.tagul2 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="III">Click me</a>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div>
</span>
<span class="content" style="float: right">
</span>
Additionally, your fadeIn() function for the appended element won't actually do anything because the div is set to display by default(essentially you're trying to fade in an element which is already visible). In order to have it fade in, you could change the class of the element you're appending, set the CSS to display:none; and then the element will fade in after being appended(I have made this change in my answer).

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.

java script to open hidden divs gets too big

i have this code it works fine problem is i need to use it for 60 links
that wil make around 3600 lines of java script code just to be able to see hidden content for 60 divs
sorry it was late, so posted wrong code, it was not working,
forgot to mention my script is menu with two links about and help when page loads the link is shown but not the contens, instead it shows welcome message, when about is clicked it shows its content and when help is clicked it replace the contens with it
ok fixed my example works fine now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#welcome-content").show();
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").show();
$("#about-content").hide();
});
});
</script>
<div id="anchor-div">
<a id="about-anchor" href="javascript:;">
About
</a>
</br>
<a id="help-anchor" href="javascript:;">
Help
</a>
</br>
</div>
<div id="content-div">
<div id="welcome-content">welcome to help system</div>
<div id="about-content">About=123</div>
<div id="help-content">Help=456</div>
</div>
jsfiddle demo here
Make use of the index of every li to show/hide the corresponding div:
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element
});
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element (skip welcome div)
});
#content-div>div {
display: none;
/* Hide all divs */
}
#content-div>div:first-child {
display: block;
/* Show welcome */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anchor-div">
About<br />
Help
</div>
<div id="content-div">
<div>Welcome!</div>
<div>About</div>
<div>Help</div>
</div>
This way you neither need ids nor classes
// Edit: I changed the answer to match the new question. I hide the divs using css (not as mentioned in the commets with js)

Categories

Resources