Html - Click Event Listener Always Hides All But First Element

AndrewGarrison
March 9, 2024
104 views
0 votes
2 Answers

This is a simple webpage I am building for personal use. The goal is to make each section clickable: the clicked section will expand using animation code that is not yet added, and the other elements will be hidden. Clicking the same element will cause it to return to the original size, and the other elements to once again be visible. However, the current code always causes the first .item element to remain and hides the others, regardless of which element is clicked.

let isExpanded = false;
const items = document.querySelectorAll(".item");

items.forEach(e => {
  e.addEventListener("click", event => {
    if (isExpanded === false) {
      items.forEach(f => {
        console.log(f.dataset.index);
        console.log(event.target.closest("[data-index]").dataset.index);
        if (f.dataset.index !== event.target.closest("[data-index]").dataset.index) {
          f.style.display = "none";
        }
      });
      isExpanded = true;
    } else {
      items.forEach(g => {
        g.style.display = "inline-block";
      });
      isExpanded = false;
    }
  })
});

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: #0066ff;
}

#title {
  color: white;
}

#list {
  width: 90%;
  margin: auto;
}

.item {
  display: inline-block;
  width: 20%;
  margin: 20px;
  padding: 0 10px;
  border: solid 7px blue;
  border-radius: 3px;
  background-color: white;
}

<h1 id="title">
  「今週の英語フレーズ」履歴
</h1>
<div id="list">
  <div class="item" data-index="1">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="2">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="3">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="4">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
</div>

Answers

Try this, you can handle most of it using CSS.

const cards = document.querySelectorAll('.popup');

cards.forEach((card) => {
    card.addEventListener('click', () => {
        // unselectCards();
        card.classList.toggle('selected');
    })
})

.container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.card {
    height: 100px;
    width: 100px;
}

.popup {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 10px solid blue;
    background: white;
    overflow: hidden;
    
    &.selected {
        position: absolute;
        // 40px because .container padding is 20px
        height: calc(100% - 40px);
        width: calc(100% - 40px);
        z-index: 1;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
    }
}

html,
body {
    height: 100%;
    margin: 0;
}

<div class="container">
    <div class="card qwe">
        <div class="popup">
            Curabitur ullamcorper, leo in egestas lacinia, neque metus sodales libero, ac sodales ligula neque vel purus. In vestibulum molestie odio. Nulla iaculis nisi molestie ante auctor vestibulum. Pellentesque id eleifend sapien. Cras lobortis lobortis nibh, non tristique sem ornare a. Fusce convallis lorem sit amet tellus pulvinar facilisis nec in sapien. Fusce lacus orci, egestas eget iaculis sed, luctus ut eros. Nulla hendrerit diam pharetra nunc viverra, sit amet ultrices sem eleifend. Proin aliquet risus arcu, in rutrum felis placerat tempor. Nullam et eros tellus. Vivamus eget venenatis est, et pellentesque enim. Maecenas condimentum massa a lacus aliquet volutpat. Aliquam vitae urna at est ultrices sagittis. Proin sapien velit, dignissim sit amet convallis non, condimentum vel nisl. Mauris pellentesque lectus ac lacus molestie, eu viverra turpis pretium. 
        </div>
    </div>
    <div class="card">
        <div class="popup">
            Sed sodales ullamcorper condimentum. Nunc volutpat sapien tristique, dictum neque at, bibendum mauris. Nullam ante tortor, ultricies nec interdum at, dictum eu quam. Proin maximus venenatis turpis in mattis. Phasellus pellentesque urna et arcu rhoncus elementum. Aenean metus enim, tincidunt id lectus et, commodo sollicitudin lectus. Nullam at velit mattis quam euismod aliquam. Nullam vel massa nec enim consectetur tempor. Mauris bibendum, orci vitae pretium ullamcorper, magna massa maximus tellus, eleifend iaculis augue libero ac sem. Duis convallis sem sed ligula tempor, at euismod mauris fermentum. 
        </div>
    </div>
    <div class="card">
        <div class="popup">
            Nulla et dui sem. Nulla sagittis vestibulum erat non gravida. Phasellus blandit et nibh luctus volutpat. Nam a ligula sed lorem feugiat tempus. Sed lacus nisi, mattis eu ullamcorper non, condimentum sed leo. Phasellus nec ultricies risus, tincidunt rhoncus arcu. Aliquam a velit sit amet nisi dictum faucibus. Aenean fringilla massa vitae eleifend elementum. Pellentesque vel orci nisl. Fusce dignissim ex tellus, et egestas enim tincidunt sed. 
        </div>
    </div>
    <div class="card">
        <div class="popup">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultrices tincidunt. Nunc elementum suscipit massa sed gravida. Curabitur facilisis tristique justo. Maecenas eros quam, aliquam dictum ante ut, molestie suscipit eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam convallis ultricies sem, sit amet egestas nibh varius quis. Morbi dapibus magna id mauris eleifend pharetra. Ut id orci tristique, feugiat nisl a, ultrices dui. Nullam metus libero, laoreet non interdum vitae, imperdiet scelerisque lacus. In finibus vel orci eu vestibulum. Vivamus posuere turpis neque, nec faucibus nisl semper vel. Suspendisse scelerisque ultrices arcu non suscipit. Donec condimentum in arcu sed eleifend. Praesent at libero ante. 
        </div>
    </div>
</div>

Here you go. Only the clicked one will be visible, others will be hidden. Clicking again will bring them back.

let isExpanded = false;
const items = document.querySelectorAll("div.item");
items.forEach((el => el.addEventListener("click", doThis)));

function doThis(event) {
  let checkIfList = event.target.parentElement.id;
  if (isExpanded === false) {

    items.forEach(el => {
      el.style.visibility = "hidden";
    });

    if (!(checkIfList === 'list')) {
      event.target.parentNode.style.visibility = "visible";
      isExpanded = true;
    } else {
      event.target.style.visibility = "visible";
      isExpanded = true;
    }
  } else {
    items.forEach(el => {
      el.style.visibility = "visible";
    });
    isExpanded = false;
  }
}

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: #0066ff;
}

#title {
  color: white;
}

#list {
  width: 90%;
  margin: auto;
}

.item {
  display: inline-block;
  width: 20%;
  margin: 20px;
  padding: 0 10px;
  border: solid 7px blue;
  border-radius: 3px;
  background-color: white;
}

<h1 id="title">
  「今週の英語フレーズ」履歴
</h1>
<div id="list">
  <div class="item" data-index="1">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="2">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="3">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="4">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Click Event Listener Always Hides All But First Element

Answers