CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sam Pittman
Sam Pittman

Reputation: 189

Hide and show menu child

I'm currently working with a piece of jquery that hides and shows several divs when a menu item is clicked.

However at the moment you if you were to click on the same menu item the newly opened div remains open instead of closing as desired. I would also like to achieve a hide div function when the div class 'submit' is click.

Any advice would be great

https://jsfiddle.net/a9ykpdwz/

Jquery

$("#one, #two, #three").hide();

$(".one, .two, .three").click(function (e) {
e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(1000).siblings('#one, #two, #three').fadeOut(1000);
});

HTML

<div id="nav">

<a href="#" class="one">WORK</a>
<a href="#" class="two">ABOUT</a>
<a href="#" class="three">CONTACT</a>
</div>

<div id="one">
<ul>
<li>xx</li> 
<li>Spaces</li>
<li>Form</li>
<li>Mind and Body</li> 
<li>Moving Image</li> 
<li>White Trails</li> 
<li>Foreign Views</li>
<ul>
<div class="submit"> close </div>
</div>

<div id="two">Text</div>
<div id="three">Text</div>

Upvotes: 0

Views: 55

Answers (2)

kamus
kamus

Reputation: 797

  1. You are not creating the event to the .close element
  2. If you want to see the new element and hide the previous showed, you need to set as display none, without transition because the elements are stacked, in other case you need to change the elements as absolutes.

fiddle :https://jsfiddle.net/a9ykpdwz/2/

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Use fadeToggle() instead of fadeIn(). I assume you mean you want all three divs hidden on submit, which works below.

$("#one, #two, #three").hide();

$(".one, .two, .three").click(function(e) {
  e.preventDefault();

  $("#" + this.className).fadeToggle(1000).siblings('#one, #two, #three').fadeOut(1000);
});

$('.submit').click(function(e) {
  $('#one, #two, #three').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav">

  <a href="#" class="one">WORK</a>
  <a href="#" class="two">ABOUT</a>
  <a href="#" class="three">CONTACT</a>
</div>

<div id="one">
  <ul>
    <li>xx</li>
    <li>Spaces</li>
    <li>Form</li>
    <li>Mind and Body</li>
    <li>Moving Image</li>
    <li>White Trails</li>
    <li>Foreign Views</li>
  </ul>    <!-- corrected a missing / here -->
  <div class="submit">close</div>
</div>

<div id="two">Text</div>
<div id="three">Text</div>

Upvotes: 0

Related Questions