CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gezer4000
gezer4000

Reputation: 101

hiding div after another is clicked

I want to hide the current div that's displayed using .toggle when another is clicked.

When another div is toggled by clicking on another link in .left, I want the div that's currently displayed in .right to disappear and be replaced with the one that's clicked. Currently div's that have been toggled stay there until toggled off onclick, I want the toggle off to trigger when another div is selected from .left

Tried using .hide and an if statement, but couldn't seem to get the JS to function properly. If someone could just point me in the right direction that would be great.

Apologies if I've phrased this badly (new to SO). Happy to edit accordingly.

JS fiddle

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="wrap">

  <div class="left">
    <div class="row">
      <div class="links">
        <a href="#">When this link is clicked, i want the first div to be shown</a>
        <a href="#">When this link is clicked, i want the second div to be shown</a>
        <a href="#">When this link is clicked, i want the third div to be shown</a>
        <a href="#">When this link is clicked, i want the fourth div to be shown</a>
      </div>
    </div>
  </div>
  <!--left-->

  <div class="right">
    <div class="row">
      <div>Content to be shown when the first link is clicked</div>
      <div>Content to be shown when the second link is clicked</div>
      <div>Content to be shown when the third link is clicked</div>
      <div>Content to be shown when the fourth link is clicked</div>
    </div>
  </div>
  <!--right-->

</div><!--wrap-->

CSS:

.links a {
  display: block;
}

.row > div:not(.links) {
  display: none;
}

.wrap {
  width: 1000px;
  height: 1000px;
}

.left {
  width: 500px;
  height: 1000px;
  float: left;
  display: inline;
}

.right {
  width: 500px;
  height: 1000px;
  float: right;
  display: inline;
}

.links a {
  width: 490px;
}

.links {
  margin-top: 20px;
}

JS:

var links = $('.links a');
links.on('click', function() {
  var n = links.index(this);
  $('.row > div:not(.links)').eq(n).toggle();
});

Upvotes: 0

Views: 176

Answers (2)

Arsh Kalsi
Arsh Kalsi

Reputation: 179

Check out this i little edit your code see live demo at https://jsfiddle.net/7xt1d887/ Hope it will help You :)

ADD this

$('.right .row').find('div').hide();

Upvotes: 1

shubham agrawal
shubham agrawal

Reputation: 3541

Add the following to your code inside the function

 $('.row > div:not(.links)').hide();

Here is JS fiddle

Upvotes: 1

Related Questions