CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6579211
user6579211

Reputation:

Open one div at a time and close all others with jQuery

Trying to implement a show/hide description box.

If the user clicks on the first showDesc link it opens it's description box. Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.

it below :

enter image description here

Below is my code:

$(".showDesc").click(function () {
    $(".descContainer").toggleClass("show");
});
.descContainer {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: none;
    line-height: 24px;
    background-color: #fdfdfd;
}

.descContainer.show {
    position: relative;
    padding: 24px 40px 24px 24px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: block;
    line-height: 24px;
    background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">

<div class="feedContainer">

<div class="feedContent">

<h3>Title</h3>


<div class="feedButtonContainer">
</div>


<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>

</div>

</div>

<div class="descContainer">

<div>Description Text</div>

</div>

</article>

<article class="feedBox mainSmooth" style="display: block;">

<div class="feedContainer">

<div class="feedContent">

<h3>Title</h3>


<div class="feedButtonContainer">
</div>


<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>

</div>

</div>

<div class="descContainer">

<div>Description Text</div>

</div>

</article>

</section>

</main>

Upvotes: 1

Views: 2838

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3913

You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.

    .descContainer {
        position: relative;
        padding: 24px 40px 24px 24px;
        border-top: 1px solid rgba(0,0,0,.08);
        line-height: 24px;
        display:none;
    }

    .descContainer:target {
        display:block;
    }
    <main>
    <section>
    <article class="feedBox mainSmooth" style="display: block;">

    <div class="feedContainer">

    <div class="feedContent">

    <h3>Title</h3>


    <div class="feedButtonContainer">
    </div>


    <ul class="list-inline feedExtras">
    <li class="">
    <a class="mainSmooth showDesc" href="#1">show description</a>
    </li>
    </ul>

    </div>

    </div>

    <div class="descContainer" id="1">

    <div>Description Text</div>

    </div>

    </article>

    <article class="feedBox mainSmooth" style="display: block;">

    <div class="feedContainer">

    <div class="feedContent">

    <h3>Title</h3>


    <div class="feedButtonContainer">
    </div>


    <ul class="list-inline feedExtras">
    <li class="">
    <a class="mainSmooth showDesc" href="#2">show description</a>
    </li>
    </ul>

    </div>

    </div>

    <div class="descContainer" id="2">

    <div>Description Text</div>

    </div>

    </article>

    </section>

    </main>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.

To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:

$(".showDesc").click(function() {
  var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
  $(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
  position: relative;
  padding: 24px 40px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: none;
  line-height: 24px;
  background-color: #fdfdfd;
}

.descContainer.show {
  position: relative;
  padding: 24px 40px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: block;
  line-height: 24px;
  background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <section>
    <article class="feedBox mainSmooth">
      <div class="feedContainer">
        <div class="feedContent">
          <h3>Title</h3>
          <div class="feedButtonContainer"></div>
          <ul class="list-inline feedExtras">
            <li class="">
              <a class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
    <article class="feedBox mainSmooth">
      <div class="feedContainer">
        <div class="feedContent">
          <h3>Title</h3>
          <div class="feedButtonContainer"></div>
          <ul class="list-inline feedExtras">
            <li class="">
              <a class="mainSmooth showDesc">show description</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="descContainer">
        <div>Description Text</div>
      </div>
    </article>
  </section>
</main>

Upvotes: 5

Related Questions