Using jQuery show() / hide() - javascript

I am using show() and hide() in my jsp page, and it is working fine, but I am having trouble figuring out a way to hide my table once it is shown. HTML EX:
<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">
So basically I want to show div1 when button1 is clicked, and show div2 when button2 is clicked. I am using hide()/show() because I never want both to show at the same time. So here is my script:
$('#b1').click(function(){
$('#d1').show();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').show();
$('#d1').hide();
});
So this works fine, as far as showing only one at a time, but I want to add some script to this to make it where if div2 is showing, I can click on button2 and make div2 hide, and the same thing for div1. I know this is confusing so if you have any questions please ask. thanks.

I think you want this:
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
If you need to still make it so that only one can be shown then probably something like this:
$('#b1').click(function(){
if($('#d1').toggle().is(":visible")){
$('#d2').hide();
}
});
$('#b2').click(function(){
if($('#d2').toggle().is(":visible")){
$('#d1').hide();
}
});

I think you need this
$('#b1').click(function(){
$('#d2').hide();
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d1').hide();
$('#d2').toggle();
});

You don't need to check anything, just toggle the first one and always hide the other one
$('#b1').click(function(){
$('#d1').toggle();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').toggle();
$('#d1').hide();
});

There's a toggle() method that you can use instead of show/hide that will do this for you.
With no parameters, the .toggle() method simply toggles the visibility
of elements:
Source: http://api.jquery.com/toggle/

$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});

if you don't use any animation, it is probably more useful to define a class in css, say, .hidden {display:"none"} and toggle it.
Thus, you code can be something like this:
$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })
Try this one, if you want, and tell us, whether it works )

You can check if something is visible by this $('#someDiv:visible') and then do appropriate handling.

Related

Divi : Hide Button when clicked

I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});

Jquery fadeOut with this selector

I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me
I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle
well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation
What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.

jQuery: Not firing event after click

In action: http://3.alphenweer.nl/weer/
Code:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
<span class="categorie" data-cat="nieuws">Nieuws</span>
<div class="box" id="box-nieuws">
Alphen
Nederland
</div>
Problem: When i click on a menu button (In the example: click on 'Neerslag' or 'Satteliet') nothing happens. I think the selector isn't correct, but it should be. Can you guys help me?
I think you're a bit confused. It appears that you want to use the data attribute of the clicked .categorie to slideToggle the corresponding element. So, you can do:
$('.categorie[data-cat]').click(function(){
$('div[id=box-"' + $(this).attr('data-cat') + '"]').slideToggle('slow');
});
or, assuming a structure consistent with the one you have posted, it can be simpler:
$('.categorie[data-cat]').click(function(){
$(this).next(".box").slideToggle('slow');
});
Already found the problem:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
In the third line, $('#cat-' ... should've been $('#box-'

Click to reveal and hide menu

I asked a question yesterday about a click to reveal menu which got answered perfectly. However, I was wondering how I can make the div fade in when the text "project info" is clicked and then fade out again when "project info is clicked again". I know this is probably a very basic thing but i'm extremely new to javascript and jquery and would appreciate some help greatly. The html code is as follows:
<div class="descinner">
Project info
</div>
and the Javascript:
$('.showDesc').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.showDesc').next().hide(); });
Have you tried the fadeToggle() method?
Like this:
$('.showDesc').click(function() {
$('.info').fadeToggle();
});
This will show the .info div on the first click of .showDesc, and hide it on the second (and so on)..
write a custom function and call it onClick...inside that function you can put your fadeIn and fadeOut...and you especially can't do it with .toggle().
Check out the FadeIn() function. Use it on the element you want to fade in.
you have jQuery animation functions: fadeIn and fadeOut. you can also use show and hide functions. just set the desired speed parameter
$('your_div').fadeIn(100);
$('your_div').fadeOut(100);

JQuery advice needed

I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul
try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.
Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.
In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/
You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>

Categories