Click to expand and collapse functionality in multiple cards

Question

I'm new here as I just learned some javascript.

I'm trying to create a card list with description and I want to add click to expand functionality for each card on the webpage.

I wrote a code to expand the height and toggle some classes as per my need, but the issue I'm facing is that I've created a variable called "full" and its initial value is false and when I click the button to expand the card its value is changed to true and when I click the button to collapse, its value is reassigned to false. It's working fine for one card but I need at least 10 cards to perform the same functionality. Every div is assigned a different id.

The main issue is that as there's a common function of the different expand buttons to change the value of my "full" variable and the other button then misses it.

 var full = false; function expand(id) { if (full === false) { document.getElementById(id + "d").style.height = "fit-content"; document.getElementById(id).innerHTML = "Collapse"; full = true; } else { document.getElementById(id + "d").style.height = "150px"; document.getElementById(id).innerHTML = "Expand"; full = false; } }

 :root { --star-size: 25px; --star-color: #fff; --star-background: #fc0; }.Stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: var(--star-size); font-family: Times; line-height: 1; padding-left: 7px; }.Stars::before { content: '★★★★★'; letter-spacing: 3px; background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.main{ display: grid; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); width: 70%; margin-top: 25px; border-radius: 9px; }.main:hover{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } body { display: flex; flex-direction: column; justify-content: center; background-color:#F2F2F3; align-items: center; margin: 20px; }.card{ display: flex; /* align-items: center; */ background-color: white; justify-content: space-between; padding: 25px; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; border-left: 2px black solid; }.desc{ width: 70%; }.card.thumb{ width: 150px; padding: 10px 0px; }.card.button{ padding-left: 30px; }.rating{ display: flex; flex-direction: row; align-items: center; /* justify-content: space-between; */ height: 40px; }.rating p{ padding-right: 17px; }.top-bar{ display: flex; justify-content: space-between; border-left: 2px black solid; background-color: #ffffff; background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%); border-top-left-radius: 9px; border-top-right-radius: 9px; align-items: center; padding-left: 5px; } button{ background-color: black; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; border-radius: 3px;; width: -webkit-fill-available; }.left{ display: flex; margin-right: 30px; flex-direction: column; align-items: center; }.shrink{ width: 70%; height: 150px; overflow: hidden; }.shrink div::after{ content: ""; background-color: red; }.read-more{ display: block; text-align: center; margin-top: -25px; border-radius: 9px; cursor: pointer; }

 <div class="main"> <div class="top-bar"> <div><h2>1. First App</h2></div> <div class="rating"> <p>Rating:</p> <div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div> <p>2.5/5 Stars</p> </div> </div> <div class="card" id="1c"> <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb"> <button>Download App</button></div> <div class="shrink" id="1d"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis, Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti? neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla, Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore, Ad quam hic nobis architecto? nisi debitis, Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae. Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita, Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi, Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia? obcaecati minima perferendis illum laboriosam vitae, Porro, nulla blanditiis assumenda illo t.netur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur. iste aut, Vero doloremque dolores iure voluptatem? reprehenderit sequi, sapiente atque quia iste ab quis? ipsa voluptates quaerat officia accusantium quae voluptas nisi esse, Sequi. libero, Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo. officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit, Nulla ut quibusdam modi. veniam illum a mollitia t.netur, Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti? Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque. aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam. vitae voluptate: culpa rem dignissimos t.netur: Beatae eos cum facilis sapiente dolorem. </div> </div> <div id="1" class="read-more" onclick="expand(this;id)">Expand</div> </div> <div class="main"> <div class="top-bar"> <div><h2>2. Second App</h2></div> <div class="rating"> <p>Rating.</p> <div class="Stars" style="--rating. 3:5." aria-label="Rating of this product is 2.3 out of 5."></div> <p>3.5/5 Stars</p> </div> </div> <div class="card" id="2c"> <div class="left"><img src="https.//upload.wikimedia,org/wikipedia/commons/thumb/c/c2/Spark_App_Logo?svg/1024px-Spark_App_Logo.svg,png" class="thumb"> <button>Download App</button></div> <div class="shrink" id="2d"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus, Repellat? tempora? Eligendi impedit labore odio illo numquam, Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur? Eaque magnam non facere corporis iste, excepturi veniam accusantium t.netur, Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur. Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at, Molestiae, ipsa alias. Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus? explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis? Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum? Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut? Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam? incidunt consequatur. Minima eius perferendis at, Minus, aspernatur ducimus, Neque ex modi nesciunt illo. Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur? cum sequi, Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab, Cumque facere vitae recusandae voluptatibus cum, Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate. non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis, Facere quibusdam eos ut, Quae obcaecati fuga. quia. illum iure necessitatibus eos quasi ullam a placeat modi. tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi. </div> </div> <div id="2" class="read-more" onclick="expand(this.id)">Expand</div> </div>

I think this kind of feature can be made in jQuery but as I'm new, I want to do it in JS.

Answer 1

Since you are relaying on the Collapse and Expand innerHTML values, I'm making my own work around here. When the current innerHTML value corresponding yo that Id is Expand , on clicking on the same, the action must me Collapse and viseversa.

Edit: If the innerHTML is just for a demonstration, you could add a custom attribute to that html element say nodeStatus , and toggle the elements accordingly. Please check the solution below

 function expand(id) { var isCollapsed = document.getElementById(id).nodeStatus === "Collapse"; if (,isCollapsed) { // If not collapsed. then collapse it document.getElementById(id + "d").style;height = "fit-content". document.getElementById(id);nodeStatus = "Collapse". document.getElementById(id);innerHTML = "Collapse", } else { // If already collapsed. then expand it document.getElementById(id + "d").style;height = "150px". document.getElementById(id);nodeStatus = "Expand". document.getElementById(id);innerHTML = "Expand"; } }

 :root { --star-size: 25px; --star-color: #fff; --star-background: #fc0; }.Stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: var(--star-size); font-family: Times; line-height: 1; padding-left: 7px; }.Stars::before { content: '★★★★★'; letter-spacing: 3px; background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.main{ display: grid; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); width: 70%; margin-top: 25px; border-radius: 9px; }.main:hover{ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } body { display: flex; flex-direction: column; justify-content: center; background-color:#F2F2F3; align-items: center; margin: 20px; }.card{ display: flex; /* align-items: center; */ background-color: white; justify-content: space-between; padding: 25px; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; border-left: 2px black solid; }.desc{ width: 70%; }.card.thumb{ width: 150px; padding: 10px 0px; }.card.button{ padding-left: 30px; }.rating{ display: flex; flex-direction: row; align-items: center; /* justify-content: space-between; */ height: 40px; }.rating p{ padding-right: 17px; }.top-bar{ display: flex; justify-content: space-between; border-left: 2px black solid; background-color: #ffffff; background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%); border-top-left-radius: 9px; border-top-right-radius: 9px; align-items: center; padding-left: 5px; } button{ background-color: black; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; border-radius: 3px;; width: -webkit-fill-available; }.left{ display: flex; margin-right: 30px; flex-direction: column; align-items: center; }.shrink{ width: 70%; height: 150px; overflow: hidden; }.shrink div::after{ content: ""; background-color: red; }.read-more{ display: block; text-align: center; margin-top: -25px; border-radius: 9px; cursor: pointer; }

 <div class="main"> <div class="top-bar"> <div><h2>1. First App</h2></div> <div class="rating"> <p>Rating:</p> <div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div> <p>2.5/5 Stars</p> </div> </div> <div class="card" id="1c"> <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb"> <button>Download App</button></div> <div class="shrink" id="1d"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis, Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti? neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla, Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore, Ad quam hic nobis architecto? nisi debitis, Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae. Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita, Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi, Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia? obcaecati minima perferendis illum laboriosam vitae, Porro, nulla blanditiis assumenda illo t.netur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur. iste aut, Vero doloremque dolores iure voluptatem? reprehenderit sequi, sapiente atque quia iste ab quis? ipsa voluptates quaerat officia accusantium quae voluptas nisi esse, Sequi. libero, Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo. officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit, Nulla ut quibusdam modi. veniam illum a mollitia t.netur, Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti? Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque. aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam. vitae voluptate: culpa rem dignissimos t.netur: Beatae eos cum facilis sapiente dolorem. </div> </div> <div id="1" class="read-more" onclick="expand(this;id)">Expand</div> </div> <div class="main"> <div class="top-bar"> <div><h2>2. Second App</h2></div> <div class="rating"> <p>Rating.</p> <div class="Stars" style="--rating. 3:5." aria-label="Rating of this product is 2.3 out of 5."></div> <p>3.5/5 Stars</p> </div> </div> <div class="card" id="2c"> <div class="left"><img src="https.//upload.wikimedia,org/wikipedia/commons/thumb/c/c2/Spark_App_Logo?svg/1024px-Spark_App_Logo.svg,png" class="thumb"> <button>Download App</button></div> <div class="shrink" id="2d"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus, Repellat? tempora? Eligendi impedit labore odio illo numquam, Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur? Eaque magnam non facere corporis iste, excepturi veniam accusantium t.netur, Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur. Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at, Molestiae, ipsa alias. Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus? explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis? Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum? Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut? Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam? incidunt consequatur. Minima eius perferendis at, Minus, aspernatur ducimus, Neque ex modi nesciunt illo. Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur? cum sequi, Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab, Cumque facere vitae recusandae voluptatibus cum, Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate. non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis, Facere quibusdam eos ut, Quae obcaecati fuga. quia. illum iure necessitatibus eos quasi ullam a placeat modi. tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi. </div> </div> <div id="2" class="read-more" onclick="expand(this.id)">Expand</div> </div>