I cannot include the js of a codepen

Question

i found this codepen: https://codepen.io/cassivesuvian/pen/BamOEra

Everything fine - but when I want to add the js as a textscript like this, it isn't working.

    <script type="text/javascript">
let more = document.querySelectorAll('.more');
for(let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    more[i].parentNode.classList.toggle('active')
  })
}
    </script>

What I have to do? I dont find any settings in this codepen.

Thank you.

Thanks for quick reply. But the code is too long for the post. Thats why i add the codepen link. — m.jonas, Aug 18 '22 at 19:33
Well you're gonna have to give us more context if you want a solution. There is not enough information in this question to answer it. — kelsny, Aug 18 '22 at 19:34
The most likely reason is that you've included your script in such a way that it's trying to run before the document has rendered. See https://stackoverflow.com/a/21814964/3412322 — Daniel Beck, Aug 18 '22 at 19:36
Also, I would like to note that the HTML, CSS, and JavaScript on the linked CodePen is **not** too long to post here on Stack Overflow. You can post functional code snippets (just like on CodePen) using the Code Snippet button which looks like [<>] — EssXTee, Aug 18 '22 at 19:46
@EssXTee Thank you... wow.. that was the problem. But I cant add all code here.. So it is really hard to explain. The script is now working when i add it at the bottom of the HTML. But when I add this codepen to my website, only one (the first) read more button is working. What do i have to change that it works with multiple container which have all the same class? Live: https://www.jonas-deutscher.com/isolier-dichtungsmaterialien/epdm-zellkautschuk — m.jonas, Aug 18 '22 at 20:05
What browser are you using? The live version you linked to works just as expected. All '*Read More*' buttons expand and contract their areas properly. Also, if it is not fully working for you have you checked the console (`F12`) for any page errors you might be getting? — EssXTee, Aug 18 '22 at 20:20

score 0 · Answer 1 · answered Aug 22 '22 at 21:23

code added

let more = document.querySelectorAll('.more');
for(let i = 0; i < more.length; i++) {
  more[i].addEventListener('click', function() {
    more[i].parentNode.classList.toggle('active')
  })
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
body {
  display: flex;
  align-text: center;
  justify-content: center;
  min-height: 100vh;
  background: #222;
  padding: 40px;
}
.container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 1200px;
}
.container .card {
  position: relative;
  width: 300px;
  padding: 20px;
  margin: 20px;
  background: white;
}
.container .card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border: 20px solid transparent;
  border-top: 20px solid teal;
  border-right: 20px solid teal;
}
.container .card.active::before {
  border-top: 20px solid purple;
  border-right: 20px solid purple;
}
.container .card .content {
  position: relative;
  height: 215px;
  overflow: hidden;
}
.container .card.active .content {
  height: auto;
}
.container .card .content::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(transparent, white);
}
.container .card.active .content::before {
  display: none;
}
.container .card .content h3 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.container .card .more {
  position: relative;
  padding: 10px 15px;
  background: teal;
  margin-top: 15px;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: .8rem;
}
.container .card.active .more {
  background: purple;
}
.container .card .more::before {
  content: "Read more";
}
.container .card.active .more::before {
  content: 'Read Less';
}

<!-- Credit for this code goes to "Online Tutorials" on YouTube. Check out the tutorial "How To Create a Read More Read Less Button using Javascript | Multiple Boxes with Read more function" at:
https://youtu.be/2wQxF7gTcFo -->

<div class="container">
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
  <div class="card">
    <div class="content">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="more"></a>
  </div>
</div>

I cannot include the js of a codepen

1 Answers1