Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to code the toggle script to only affect one part of the site?

byMR
July 4, 2023

In other words, I’d like the toggle code to work only on the part of the site where it’s called. Currently, since there are classes involved, the script fires on all (similar) classes (when the .showAll is clicked all .newsTexCont get .openNewsText).

How to write the code without id‘s, and keep the way parts can be repeated with classes?

$('.showAll').click(function() {
  $('.newsTextCont').toggleClass("openNewsText");
  $(this).toggleClass('newsToggle');
});
.newsTitle {
  align-self: stretch;
  color: black;
  font-size: 30px;
  font-family: Lato;
  font-weight: 700;
  line-height: 38px;
  word-wrap: break-word
}

.newsTextCont {
  align-self: stretch;
  height: 124px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.newsTextInner {
  align-self: stretch;
  height: 100px;
  color: black;
  font-size: 16px;
  font-family: Lato;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.newsTextInner::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 4px;
}

.openNewsText .newsTextInner::after {
  content: none;
}

.newsTextCont.openNewsText,
.openNewsText .newsTextInner {
  height: auto;
}

.showAll {
  cursor: pointer;
}

.showAll:hover {
  text-decoration: none;
}

.showAll::after {
  content: "";
  background: url(svg/footerChevron.svg);
  transform: rotate(0deg);
  transition: all 1s;
  width: 12px;
  height: 7px;
  position: relative;
  left: 7px;
  bottom: 0px;
  display: inline-block;
}

.showAll.newsToggle::after {
  content: "";
  background: url(svg/footerChevron.svg);
  transform: rotate(180deg);
  transition: all 1s;
  width: 12px;
  height: 7px;
  position: relative;
  left: 7px;
  bottom: 0px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">TITLE</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll" id="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">TITLE</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">TITLE</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">TITLE</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
</section>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

You’re selecting all the .newsTestCont elements in the DOM and updating each of them.

To fix the problem you need to traverse the DOM to find only the one related to the .showAll button which was clicked. To do that use this to get a reference to the button, along with the closest() method.

Change this:

$('.newsTextCont').toggleClass("openNewsText");

To this:

$(this).closest('.newsTextCont').toggleClass("openNewsText");

Here’s a working example:

$('.showAll').click(function() {
  $(this).closest('.newsTextCont').toggleClass("openNewsText");
  $(this).toggleClass('newsToggle');
});
.newsTitle {
  align-self: stretch;
  color: black;
  font-size: 30px;
  font-family: Lato;
  font-weight: 700;
  line-height: 38px;
  word-wrap: break-word
}

.newsTextCont {
  align-self: stretch;
  height: 124px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.newsTextInner {
  align-self: stretch;
  height: 100px;
  color: black;
  font-size: 16px;
  font-family: Lato;
  font-weight: 400;
  line-height: 24px;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.newsTextInner::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 4px;
}

.openNewsText .newsTextInner::after {
  content: none;
}

.newsTextCont.openNewsText,
.openNewsText .newsTextInner {
  height: auto;
}

.showAll {
  cursor: pointer;
}

.showAll:hover {
  text-decoration: none;
}

.showAll::after {
  content: "";
  background: url(svg/footerChevron.svg);
  transform: rotate(0deg);
  transition: all 1s;
  width: 12px;
  height: 7px;
  position: relative;
  left: 7px;
  bottom: 0px;
  display: inline-block;
}

.showAll.newsToggle::after {
  content: "";
  background: url(svg/footerChevron.svg);
  transform: rotate(180deg);
  transition: all 1s;
  width: 12px;
  height: 7px;
  position: relative;
  left: 7px;
  bottom: 0px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">TITLE</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll" id="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">The H4H program reached new milestones</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">The H4H program reached new milestones</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
  <div class="innerWrap newsWrap">
    <div class="newsCont">
      <div class="newsLeftCont">
        <div class="newsLeftContInner">
          <div class="newsDate">28. September 2022.</div>
        </div>
      </div>
      <div class="newsMiddleCont">
        <div class="newsTitle">The H4H program reached new milestones</div>
        <div class="newsTextCont">
          <div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
            morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
            nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
            purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
          <div class="showAllCont">
            <div class="showAll">Show all</div>
          </div>
        </div>
        <div class="newsImgCont">
          <img class="newsImg" src="https://via.placeholder.com/682x460" />
          <div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
        </div>
      </div>
    </div>
  </div>
</section>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading