Problemas
Hay los siguientes problemas que son los siguientes:
.Card1.short>li:nth-child(n + 6){display: block;} solo, pero necesito para ocultar la etiqueta de listas por defectoinnerHTML de ambos botones funciona bien ya que cambia individualmente al hacer clicCódigo
function reed(saad) { var ul = document.getElementById("Card1"); button = document.getElementById("demo1"); ul.classList.toggle("short"); if (saad.innerHTML == "Show More") { saad.innerHTML = "Show Less"; } else { saad.innerHTML = "Show More"; } } .Card1.short > li:nth-child(n + 6) { display: block; } .Card1 > li:nth-child(n + 6) { display: none; } ul{float:left;} <ul class="Card1" id="Card1"> <li>Windows 10</li> <li>8GB Ram</li> <li>1TB SSD</li> <li>Intel Core i7 (11th Gen)</li> <li>NVIDIA GeForce</li> <li>Full HD Display</li> <li>Dolby Audio</li> <li>1 Warranty</li> <button id="demo1" onclick="reed(this)">Show More</button> </ul> <ul class="Card2" id="Card2"> <li>Windows 20</li> <li>16GB Ram</li> <li>10TB SSD</li> <li>Intel Core i15 (21th Gen)</li> <li>NVIDIA</li> <li>Double HD Display</li> <li>Dolby Audio</li> <li>2 Warranty</li> <button id="demo2" onclick="reed(this)">Show More</button> </ul>He editado tu código. En lugar de seleccionar un elemento por id , use this para obtener parentElement y alternar la clase short .
Además, si desea que la lista esté marcada con una viñeta, use display:list-item . La palabra clave list-item hace que el elemento genere un cuadro de pseudoelemento ::marker.
function reed(saad) { saad.parentElement.classList.toggle("short"); if (saad.innerHTML == "Show More") { saad.innerHTML = "Show Less"; } else { saad.innerHTML = "Show More"; } } .Card1.short > li:nth-child(n + 6), .Card2.short > li:nth-child(n + 6) { display: list-item; } .Card1 > li:nth-child(n + 6), .Card2 > li:nth-child(n + 6) { display: none; } ul{ float:left; } <ul class="Card1" id="Card1"> <li>Windows 10</li> <li>8GB Ram</li> <li>1TB SSD</li> <li>Intel Core i7 (11th Gen)</li> <li>NVIDIA GeForce</li> <li>Full HD Display</li> <li>Dolby Audio</li> <li>1 Warranty</li> <button id="demo1" onclick="reed(this)">Show More</button> </ul> <ul class="Card2" id="Card2"> <li>Windows 20</li> <li>16GB Ram</li> <li>10TB SSD</li> <li>Intel Core i15 (21th Gen)</li> <li>NVIDIA</li> <li>Double HD Display</li> <li>Dolby Audio</li> <li>2 Warranty</li> <button id="demo2" onclick="reed(this)">Show More</button> </ul>Puede probar lo siguiente, que apunta al elemento principal del botón, en lugar de usar una identificación fija. También en el css, "list-item" en lugar de "block" mantendrá las viñetas.
function reed(saad) { saad.parentElement.classList.toggle("short"); if (saad.innerHTML == "Show More") { saad.innerHTML = "Show Less"; } else { saad.innerHTML = "Show More"; } } <ul class="Card" id="Card1"> <li>Windows 10</li> <li>8GB Ram</li> <li>1TB SSD</li> <li>Intel Core i7 (11th Gen)</li> <li>NVIDIA GeForce</li> <li>Full HD Display</li> <li>Dolby Audio</li> <li>1 Warranty</li> <button id="demo1" onclick="reed(this)">Show More</button> </ul> <ul class="Card" id="Card2"> <li>Windows 20</li> <li>16GB Ram</li> <li>10TB SSD</li> <li>Intel Core i15 (21th Gen)</li> <li>NVIDIA</li> <li>Double HD Display</li> <li>Dolby Audio</li> <li>2 Warranty</li> <button id="demo2" onclick="reed(this)">Show More</button> </ul> .Card.short > li:nth-child(n + 6) { display: list-item; } .Card > li:nth-child(n + 6) { display: none; } ul{float:left;}Marque este violín si desea generar las tarjetas usando javascript: https://jsfiddle.net/anixiapetha/o7fyjcnL/2/