How to reach to a child div in jQuery?-CodePudding

I'm trying to make a 'show more' button in jQuery but having some problems.

<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>

that is the HTML. And here is the jQuery:

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev(".content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});

When content is only under the text container it works fine. But it doesn't work if I add a parent div, for example:

  <div >
      <div >
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
         <p>Some more text</p>
         <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
         </ul>
      </div>
  </div>

How can I reach to content div when it is now a child div in jQuery? Thanks in advance!

CodePudding user response：

Is this what you were trying to do? Use the parentNode to go up the DOM and then issue a querySelector to find the DIV.content that you wish to show/hide.

$(".show-more a").on("click", function() {
  let div=this.parentNode.parentNode.querySelector('.content');
  let classes=['showContent','hideContent'];
  
  if( div.classList.contains( classes[0] ) )div.classList.replace( classes[0],classes[1] );
  else div.classList.replace( classes[1], classes[0] );
  
  this.textContent = this.textContent=='Show more' ? 'Show less' : 'Show more';
});

.showContent{
  display:block;
}
.hideContent{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>

CodePudding user response：

you can use closest and find pointing at the outer container

I also do a bit of refactoring

like this

$(() => {
  $('.show-more a').on('click', e => {
    e.preventDefault();
    const $this = $(e.target)
    const $content = $this.closest('.text-container').find('.content')

    $content.toggleClass("hideContent").toggleClass('showContent');

    const linkText = $content.hasClass('hideContent')? 'Show more':'Show less'
    $this.text(linkText);
  })

})

.hideContent {
 display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>

CodePudding user response：

You can use this ForEach loop which helps you to show/hide content for each post on the same page. And you don't need to use jQuery anymore.

 let showMoreBtn = document.querySelectorAll('.show-more');
showMoreBtn.forEach((eachBtn)=>{
    let textContainer =  eachBtn.parentNode;
    let contentBox = textContainer.querySelector('.content').classList;
    eachBtn.addEventListener('click',(event)=>{
        event.preventDefault();
        if(contentBox.contains('hideContent')){
            contentBox.remove('hideContent');
            contentBox.add('showContent');
            eachBtn.innerHTML = ` <a href="#">Show less</a>`;
        }else{
            contentBox.add('hideContent');
            contentBox.remove('showContent');
            eachBtn.innerHTML = ` <a href="#">Show more</a>`;
        }
    })
});

.content.hideContent{display:none;}
.content.showContent{display:block;}

<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>
<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>
<div >
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div >
    <a href="#">Show more</a>
  </div>
</div>