How I hide a div when jquery show another div?

Question

I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.

$(".toggle").click(function() { $(".element2").toggle(); }); $(".close").click(function() { $(".element2").hide(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element"> Element 1 <div class="toggle"> toggle </div> <div class="element2"> Element 2 <div class="close">close Element 2</div> </div> </div>

I made two different file. The jquery's file linked to the html. — Davikx
– Davikx, Commented Mar 28, 2018 at 22:53

JacobIRR · Accepted Answer · 2018-03-28 22:54:51Z

Add display none to hide an element from the start:

<div class="element2" style="display:none">

The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.

My problem is that the div in background, element, doesn't disappear. And i don't know why!
@Davikx Check out my answer, I think it is what you are looking for.

BShaps · Accepted Answer · 2018-03-28 23:09:29Z

In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.

For style tag:

<div class="element2" style="display:none">

For CSS:

.element2 { display: none; }

Then for your code you are close. In order to make element hide, you need to change it to:

$(".toggle").click(function() { $(".element2").show(); $(".element").hide(); }); $(".close").click(function() { $(".element2").hide(); $(".element").show(); });

The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:

<div class="element"> Element 1 <div class="toggle"> toggle </div> </div> <div class="element2"> Element 2 <div class="close">close Element 2</div> </div>

With this code, the element div disappear before it appear the element2
Oh my bad, didn't see your element2 div was contained in the element div. Unless you pull the element2 div outside of the element div then you can't hide element while showing element2
Oh shit! Thanks! I had not really seen it! But if i put the div2 outside, how I place it on the div element?
I updated the HTML, if you want to appearance to change then you'll want to accomplish that with CSS. Most people who aren't design experts (and some who are) use bootstrap to help with the layout of the page.

Milan Adamovsky · Accepted Answer · 2018-03-28 23:02:31Z

You should probably do something like this:

$(".toggle").click(function() { $(this).parent().find(".element2").toggle(); }); $(".close").click(function() { $(this).parent().hide(); // close the correct .element2 });

In CSS you need to:

.element2 { display: none; }

vinayakj · Accepted Answer · 2018-03-28 23:06:35Z

just $(".element2").hide(); hide it at start

$(function() { $(".element2").hide(); $(".toggle").click(function() { $(".element2").toggle(); }); $(".close").click(function() { $(".element2").hide(); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element">Element 1 <div class="toggle">Toggle </div> <div class="element2"> Element 2 <div class="close"> close</div> </div> </div>

Doing it this way will cause a flicker. The initial hide must be in CSS.

Maciej.O · Accepted Answer · 2018-03-28 23:11:11Z

HTML

 <div class="element"> <div class="toggle"></div> <div class="element2" style="display:none"> <div class="close"></div> </div> </div>

EXAMPLE CSS

.toggle { display:block; width:20px; height:20px; margin-left:10px; float:left; background:green; } .element2{ display:block; width:40px; height:40px; margin-left:10px; float:left; background:yellow; } .close{ display:block; width:20px; height:20px; margin-left:10px; float:right; border:1px solid #000; }

JQUERY

$(".toggle").click(function() { $(".element2").toggle(); }); $(".close").click(function() { $(".element2").css({"display":"none"}); });

fiddle to check

I hope it is helpfull answer. Good Luck !

Collectives™ on Stack Overflow

How I hide a div when jquery show another div?

5 Answers 5

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

1 Comment

1 Comment

Comments

Related