Показывать / скрывать разделы текста по отдельности при нажатии кнопки

Question

Итак, у меня есть эта кнопка переключения отображения / скрытия, работающая по моему вкусу.

Мне также удалось получить значок изображения - глаз, который можно изменить (открыть и закрыть), когда я переключаюсь между скрытием / отображением деталей.

Видите ...? У меня значение атрибута кнопки меняется при переключении самой кнопки.

Теперь у меня есть два разных раздела текста. Я хотел бы переключать скрытие / отображение этих разделов текста по отдельности. НО, когда я переключаюсь на «скрыть» текст вкратце -II, текст вкратце - I скрыт! фу! Я попытался дать им разные идентификаторы и включил измененные идентификаторы в сценарий. Это просто не работает! ПОМОЩЬ!

Вы также можете поиграть с моим кодом. Там же подробно описана проблема, с которой мне нужна помощь.

body{
  margin:3em;
  background: #262626;
  color: #f7f7f2;
  font-family: Helvetica;
  font-size:0.8em;
  line-height:2;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

.spec-proj-briefshowhide {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-left: 3em;
           padding-right: 3em;
  border-bottom: 0.05em solid #f7f7f2;
       }



       .spec-proj-briefshowhide input {
           padding: 0.5em;
           color: #01BAEF;
           font-size: 0.8em;
           font-weight: 400;
           text-transform: uppercase;
           cursor: pointer;
           background-color: #262626;
           border: 0.05em solid #01BAEF;
           border-radius: 0.1em;
           outline: none;
       }


       .showhide-buttons-icons img {
           max-width: 3em;
           vertical-align: middle;
           padding-left: 2em;
           padding-right: 2em;
           align-self: flex-start;
       }

function toggle(ele) {
            var cont = document.getElementById('proj-details');
            if (cont.style.display == 'flex') {
                cont.style.display = 'none';

                document.getElementById(ele.id).value = 'Show details';
            } else {
                cont.style.display = 'flex';
                document.getElementById(ele.id).value = 'Hide details';
            }
        }

function changeImage() {
            var image = document.getElementById('opencloseeye');
            if (image.src.match("https://i.ibb.co/NjRDMFS/OPENEYE.png")) {
                image.src = "https://i.ibb.co/yPhD6HF/CLOSEEYE.png";
            } else {
                image.src = "https://i.ibb.co/NjRDMFS/OPENEYE.png";
            }
        }

Answer 1

Основная проблема заключается в том, что вы используете id, но он не подходит для нескольких элементов, потому что он должен быть уникальным, поэтому просто замените его классами, а также целевыми элементами в функции относительно элемента, который вы щелкаете (где у вас есть обработчик кликов).

Просто добавлены некоторые исправления в ваш пример ;

Answer 2

id должно быть уникальным в том же HTML do c, или они должны быть указаны в class, если вы повторно используете одно и то же «имя».

для вышеуказанного, Самое простое исправление - дать вашим сводкам разные идентификаторы, а затем передать идентификатор в функции переключения для его переключения.

т.е. у вас есть две секции идентификатора proj-details-1 и proj-details-2 в вашем HTML.

Затем для переключения вы можете передать идентификатор, который нужно переключить. ... onclick="toggle(this, 'proj-details-1'); ...". Другая кнопка будет иметь другой идентификатор.

В вашей функции переключения:

function toggle(ele, projId) {
  var cont = document.getElementById(projId);
  ....
}

Другими способами сделать это может быть обход DOM для просмотра узлов-братьев, но вышеперечисленное подойдет что вам нужно.