CSS / EJS question

1

Right now I am using EJS to loop through an array and create an li for each element. Inside that li, I am creating a ‘details’ button so more details will show when clicked and the hidden details section.

I want to only toggle the hidden section that is next to the button i just clicked. Right now if I click any details button, every li will then be selected and show details. Anyone know I could solve this?

Here is my code:

EJS file:

<% results.forEach(book => { %>
    <section class="saved-books">
      <form class="saved-books-form">
        <ul>
          <li class="book">
            <input type="hidden" name="title" value='<%= book.title %>' class="input-form" />
            <h4><%= book.title %></h4>

            <input name="image_url" value="<%= book.image_url %>" type="hidden" />
            <img src='<%= book.image_url %>' alt='book thumbnail'>

            <input name="author" type="hidden" value='<%= book.author %>' class="input-form" />
            <p><%= book.author %></p>

            <input name="description" type="hidden" class="description" value='<%= book.description %>'
              class="input-form" />
            <p class="book-description"><%= book.description %></p>

            <!-- <input value="MORE DETAILS" id="more-details" type="submit" /> -->
          </li>
        </ul>
      </form>
      <section class='details-section'>
        <button class="update-book">UPDATE</button>
        <button class="delete-book">DELETE</button>
        <button class="more-details">DETAILS</button>
        <article class="show-toggle more-details-list">
          <ul>
            <li>
              <p><%= book.isbn %></p>
            </li>
            <li>
              <p>Bookshelf: <%= book.bookshelf %></p>
            </li>
          </ul>
        </article>
      </section>
    </section>
    <% }) %>

JS file:

// toggle book details
$(document).ready(() => {
  $('.more-details').click((e) => {
    console.log('on client-side');
    e.preventDefault();
    // Only toggle the more-details-list class that is next to the button I clicked
    $('.more-details-list').toggle('.show-toggle');
  });
});
2

You don’t need to use a button + JS, you can just use a checkbox and a label and some basic CSS

label for checkbox, "More Details"
checkbox
article.more-details-list // your text here

Then

.more-details-list {
  // Hidden
}

checkbox:checked + .more-details-list {
 // Not hidden
}
3

Cool I would have never thought of that! Thanks for the reply!

1 Like