how to hide/show siblings div when i click on div

Question

I have multiple divs on my webpage . When i click on parent div called singers-div it suppose to open this <p> only in this div and close <p> inside siblings divs. But it doesn't work.

note: childern() gives me an error if i try to use it. mine.js:27 Uncaught TypeError: $(...).childern is not a function

HTML

<section>
       <div class="container">
          <div class="row w-50 m-auto py-5">

              <div class="col-md-12">
                  <div class="bg-dark singers-div">
                    <h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
                    <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
                  </div>
              </div>
              <div class="col-md-12 ">
                  <div class="bg-dark singers-div">
                    <h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
                    <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
                  </div>
              </div>
              <div class="col-md-12 ">
                  <div class="bg-dark singers-div">
                    <h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
                    <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
                  </div>
              </div>
              <div class="col-md-12 ">
                  <div class="bg-dark singers-div">
                    <h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
                    <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
                  </div>
              </div>
          </div>
       </div>


    </section>

CSS

  h1, h2, p {
        margin: 0;
  }
  .singers
  {
        display: none;
  }     
  .singers-head
  {
        cursor: pointer;
  }

jQuery

$(".singers-div").click(function(){
    $(this).find('p').slideDown(1000);
    $(this).find('.singers').siblings('p').slideUp(1000);
})

Answer 1

In this line:

$(this).find('.singers').siblings('p').slideUp(1000); 

.siblings only applies to elements that have the same parent - not at the same "level" (cousins if you like). In your HTML each of the .singers is in its own singers-div.

You need to go up to a common parent then find all the p.singers to hide them:

$(this).closest(".container").find('p.singers')

$(".singers-div").click(function() {
  $(this).closest(".container").find('p.singers').slideUp(1000);
  $(this).find('p').slideDown(1000);
})

h1,
h2,
p {
  margin: 0;
}

.singers {
  display: none;
}

.singers-head {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="container">
    <div class="row w-50 m-auto py-5">

      <div class="col-md-12">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
    </div>
  </div>
</section>

---

EDIT for completeness, you can exclude the "current" one depending on your requirements (most likely not having it pop up and down immediately - but it may be that you want it to hide on 2nd click, so keep a variable with the "current" paragraph and exclude it as required)

$(".singers-div").click(function() {
  var current = $(this).find('p').slideDown(1000);
  $(this).closest(".container").find('p.singers').not(current).slideUp(1000);
})

h1,
h2,
p {
  margin: 0;
}

.singers {
  display: none;
}

.singers-head {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="container">
    <div class="row w-50 m-auto py-5">

      <div class="col-md-12">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

You could do it like this:

$(".singers-div").click(function() {
if ($(this).find('p').css("display") == "none") {
 let singers = $(".singers").not(this);
 singers.each(function() {
   if ($(this).css("display") == "block") {
     $(this).slideUp(1000);
   }
 });
 $(this).find('p').slideDown(1000);
   } else {
 $(this).find('p').slideUp(1000);
   }
 })

h1, h2, p {
    margin: 0;
}

.singers
{
    display: none;
}

.singers-head
{
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="container">
    <div class="row w-50 m-auto py-5">

      <div class="col-md-12">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger one</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger two</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger three</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
      <div class="col-md-12 ">
        <div class="bg-dark singers-div">
          <h2 class="bg-danger text-center singers-head">ٍSinger four</h2>
          <p class="singers">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis iure illum adipisci necessitatibus eum nam, ut possimus dolore deleniti laudantium dolor, laborum, in ducimus mollitia quisquam quis exercitationem! Deleniti, sit?</p>
        </div>
      </div>
    </div>
  </div>


</section>