CODEWITHSUNDEEP
jquerycssshow-hide
Willem Schoeman
Willem Schoeman

Reputation: 13

Div not hiding when new div is clicked

There are 3 divs that show and hide in the same space, when the divs are clicked individually to show and hide, they work perfectly fine. However... If I open the first div and then click the second one it doesn't automatically close the second one... and so forth

I think it would be easiest to view what I am talking about on the link below:

http://www.voyagetestsite.co.za

See my HTML, I've taken out the unnecessary bits...

jQuery(document).ready(function() {
  jQuery(".menu-trigger").click(function() {
    $(".menu-trigger").hide("scale")
    jQuery(".test").slideToggle(900, function([complete]) {
      jQuery(this).toggleClass(".test").css("display");
    })
  });
});
$("#hide").click(function() {
  $("#bio-content").hide("slide");
  $("#hide").hide();
  $("#show").show();
});
$("#show").click(function() {
  $("#bio-content").show("slide");
  $("#show").hide();
  $("#hide").show();
});
$("#hide2").click(function() {
  $("#info-content").hide("slide");
  $("#hide2").hide();
  $("#show2").show();
});
$("#show2").click(function() {
  $("#info-content").show("slide");
  $("#show2").hide();
  $("#hide2").show();
});
$("#hide3").click(function() {
  $("#drums-content").hide("slide");
  $("#hide3").hide();
  $("#show3").show();
});
$("#show3").click(function() {
  $("#drums-content").show("slide");
  $("#show3").hide();
  $("#hide3").show();
});
// Preload all the GIF.
var image = [];

$.each(gif, function(index) {
  image[index] = new Image();
  image[index].src = gif[index];
});

function changeImage() {
  var ima = document.getElementById("BSlate");
  if (ima.src.match('BIDSlate')) {
    (ima.src = "img/BSlate.png");
  } else
    (ima.src = "img/BIDSlate.gif");
}
    #show,

    #show2,

    #show3 {

      display: block;

      background: none;

      border: none;

      font-family: anders;

      font-size: 36px;

      color: #ABD8C1;

      outline: none;

    }

    #hide,

    #hide2,

    #hide3 {

      display: none;

      background: none;

      border: none;

      font-family: anders;

      font-size: 36px;

      color: #ABD8C1;

      outline: none;

    }

    #bio-content {

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      height: 400px;

      display: none;

      margin: 0 auto;

      padding: 0;

      position: relative;

      z-index: 100;

    }

    #info-content {

      height: 400px;

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      display: none;

      margin: 0 auto;

      padding: 0;

      position: relative;

      z-index: 100;

    }

    #drums-content {

      height: 400px;

      background-color: rgba(0, 0, 0, 0.5);

      width: 90%;

      display: none;

      margin: 0 auto;

      margin-bottom: 50px;

      padding: 0;

      z-index: 100;

      position: relative;

    }
<!-------------------- MY HTML --------------------------------->

<ul>
  <li>
    <input type="button" value="Less Bio" id="hide" />
    <input type="button" value="Biography" id="show" />
  </li>
  <li>
    <input type="button" value="Less Info" id="hide2" />
    <input type="button" value="Info" id="show2" />
  </li>
  <li>
    <input type="button" value="Less Drums" id="hide3" />
    <input type="button" value="Drums" id="show3" />
  </li>
</ul>
<div id="bio-content">
  <div class="content-pic">
    <img src="img/biopic.png" />
  </div>
  <div class="slide-content">
    <h1>Biography</h1>
    <hr />
    <p>Lorem ipsum dolor</p>
  </div>
  <div id="info-content">
    <div class="content-pic">
      <img src="img/infopic.png" />
    </div>
    <div class="slide-content">
      <h1>Information</h1>
      <hr />
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div id="drums-content">
    <div class="content-pic">
      <img src="img/drumpic.png" />
    </div>
    <div class="slide-content">
      <h1>Drums</h1>
      <hr />
      <p>Lorem</p>
    </div>
  </div>
</div>
<span class="menu-trigger" onclick="changeImage()">
    <h1 class="menu-button">MENU</h1></span>
<!-----------END MENU------------>
</div>
</div>

Upvotes: 1

Views: 61

Answers (3)

Harshul Pandav
Harshul Pandav

Reputation: 1036

Modified your code to make it working. I've omitted few stuff that you can add back.

Fiddle

$(".link").click(function() {

  if ($("#" + $(this).attr("desc")).css('display') != 'none') {
    $(".description").hide();
    $(this).val($(this).val().substring(5));
  } else {
    $(".description").hide();
    $(this).val("Less " + $(this).val());
    $("#" + $(this).attr("desc")).show("slide");
  }
  var ob = this;
  $(".link").each(function() {
    if (!$(ob).is($(this)) && $(this).val().indexOf("Less") > -1) {
      $(this).val($(this).val().substr(5));
    }
  });
});
#show,
#show2,
#show3 {
  display: block;
  `enter code here` background: none;
  border: none;
  font-family: anders;
  font-size: 36px;
  color: #ABD8C1;
  outline: none;
}

#hide,
#hide2,
#hide3 {
  display: none;
  background: none;
  border: none;
  font-family: anders;
  font-size: 36px;
  color: #ABD8C1;
  outline: none;
}

#bio-content {
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  height: 400px;
  display: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 100;
}

#info-content {
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  display: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 100;
}

#drums-content {
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 90%;
  display: none;
  margin: 0 auto;
  margin-bottom: 50px;
  padding: 0;
  z-index: 100;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="button" value="Biography" class="link" desc="bio-content"/>
  </li>
  <li>
    <input type="button" value="Info" class="link" desc="info-content" />
  </li>
  <li>
    <input type="button" value="Drums" class="link" desc="drums-content" />
  </li>
</ul>

<div id="bio-content" class="description">
  <div class="content-pic"><img src="img/biopic.png" /></div>
  <div class="slide-content">
    <h1>Biography</h1>
    <hr />
    <p>Lorem ipsum dolor</p>
  </div>
  </div>
  
  <div id="info-content" class="description">
    <div class="content-pic"><img src="img/infopic.png" /></div>
    <div class="slide-content">
      <h1>Information</h1>
      <hr />
      <p>Lorem ipsum</p>
    </div>
  </div>
  
  <div id="drums-content" class="description">
    <div class="content-pic">hello</div>
    <div class="slide-content">
      <h1>Drums</h1>
      <hr />
      <p>Lorem</p>
    </div>
  </div>


<!-----------END MENU------------>

Upvotes: 0

Sune S.-T.
Sune S.-T.

Reputation: 235

I would add a class (e.g. class="content-container" to the three content divs. To the three #show.click-functions I would then add (in the beginning) $(".content-container").hide();

Upvotes: 0

Zach L
Zach L

Reputation: 712

Hmmm, one way to do it would be to give each content div a class(ie class="content") and then use jQuery's not to hide every thing that is not you current div (for instance drum-content):

$(".content").not($("#drums-content")).hide();

Upvotes: 1

Related Questions