时间戳

首页 > 解决方案 > 切换按钮时单独显示/隐藏文本部分

javascript - 切换按钮时单独显示/隐藏文本部分

问题描述

所以我让这个显示/隐藏切换按钮按我的喜好工作。

当我在隐藏/显示细节之间切换时，我还设法获得了图像图标 - 眼睛改变（打开和关闭）。

你看...？当我切换按钮本身时，按钮的 value 属性会发生变化。

现在，我有两个不同的文本部分。我想单独切换隐藏/显示这些文本部分。但是，当我切换到“隐藏”简要文本时-II，简要文本-我被隐藏了！呸！我尝试给他们不同的 id 并将更改后的 id 合并到脚本中。它只是行不通！帮助！

你也可以摆弄我的codepen。我需要帮助的问题也有详细说明。

<body>
  <h1>So many problems to solve</h1>
  
<div class="spec-proj-briefshowhide">
  <h2>Hello! this is the first problem. This is just the beginning to an unending greed.</h2>
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - I:</p>
  <ul>
    <li>So I have this show/hide toggle button working to my liking.</li>
    <li>I also managed to get the eye to open and close when I toggle between hide/show details.</li>
    <li>You see..? I have the value attribute of the button changing as I click on it to toggle too.</li>
    <li>Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.</li>
    <li>For now, even if I toggle to hide the text for brief -II, text for brief - I is hidden.</li>
    <li>I tried giving them different ids and to incorporate it into the script. It just doesnt work for me.</li>
</ul>
</div>
</div>
</div>
<h2>Here comes the second issue of the evil eye and the sleepy eye.</h2>
  <div class="spec-proj-briefshowhide">
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - II:</p>
  <ul>
    <li>The second issue is to incorporate the toggle feature to the eye(s).</li>
    <li>So when I click an open eye, I would like it to hide the text details and, simultaneously change the value of the adjacent button to 'Show details'.</li>
    <li>This should occur individually and for each section of text (meaning individually and seperately for Brief - I and Brief - II).</li>
    <li>I have a feeling that this would make it easy for people to visually recognise if the text is hidden or open.</li>
    <li>This hide/Show drama is to just save on screen real estate.</li>
    <li>Help needed!</li>
</ul>
</div>
</div>
</div>
  
</body>

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";
            }
        }

标签： javascripthtmlcss

解决方案

主要问题是您使用了“id”，但它不适合多个元素，因为它应该是唯一的，所以只需将其替换为类，并在函数中定位与您单击的元素相关的元素（您有一个单击处理程序） .

刚刚为您的示例添加了一些更正；

<body>
  <h1>So many problems to solve</h1>

  <div class="spec-proj-briefshowhide">
    <h2>Hello! this is the first problem. This is just the beginning to an unending greed.</h2>
    <div class="showhide-buttons-icons">
      <p><img class="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
        <input type="button" value="Hide details" class="bt" onclick="toggle(this); changeImage(this);"></p>
    </div>
    <div style="display:flex;" class="proj-details">
      <div class="smodpvproject-brief">
        <p>Brief - I:</p>
        <ul>
          <li>So I have this show/hide toggle button working to my liking.</li>
          <li>I also managed to get the eye to open and close when I toggle between hide/show details.</li>
          <li>You see..? I have the value attribute of the button changing as I click on it to toggle too.</li>
          <li>Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.</li>
          <li>For now, even if I toggle to hide the text for brief -II, text for brief - I is hidden.</li>
          <li>I tried giving them different ids and to incorporate it into the script. It just doesnt work for me.</li>
        </ul>
      </div>
    </div>
  </div>
  
  <h2>Here comes the second issue of the evil eye and the sleepy eye.</h2>
  <div class="spec-proj-briefshowhide">
    <div class="showhide-buttons-icons">
      <p>
        <img class="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
        <input type="button" value="Hide details" class="bt" onclick="toggle(this); changeImage(this);">
     </p>
    </div>
    <div style="display:flex;" class="proj-details">
      <div class="smodpvproject-brief">
        <p>Brief - II:</p>
        <ul>
          <li>The second issue is to incorporate the toggle feature to the eye(s).</li>
          <li>So when I click an open eye, I would like it to hide the text details and, simultaneously change the value of the adjacent button to 'Show details'.</li>
          <li>This should occur individually and for each section of text (meaning individually and seperately for Brief - I and Brief - II).</li>
          <li>I have a feeling that this would make it easy for people to visually recognise if the text is hidden or open.</li>
          <li>This hide/Show drama is to just save on screen real estate.</li>
          <li>Help needed!</li>
        </ul>
      </div>
    </div>
  </div>

 <script>
function toggle(el) {
  // you need to find an '.proj-details' block relatively to a 'this' element (to button)
  const cont = el.parentNode.parentNode.nextElementSibling;
  
  if (cont.style.display == "flex") {
    cont.style.display = "none";
    // you already have a current element which is passed in a function, so you can just change a value
    el.value = "Show details"
  } else {
    cont.style.display = "flex";
    el.value = "Hide details"
  }
}

function changeImage(el) {
  // save here, relative to an element which you click
  const image = el.previousElementSibling;
  
  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";
  }
}
 </script>

</body>

推荐阅读