javascript - HideShow elements by clicking only one button

Right know the code is working great but really what I want is to make the button with text "hide" to change that text to "show" but only it should happen after I click the button with text "hide" and after I click that button the text content hides and only it remains the button with text "show" and when I click show I want the code to show again.

window.onload = function() {

  var listItems = document.querySelectorAll("#myList li");

  for (var i = 0; i < listItems.length; i++) {
    var item = listItems[i];

    item.querySelector(".hide").onclick = function(e) {
      var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

      img.style.display = "none";
      header.style.display = "none";
      elemA.style.display = "none";
      elemP.style.display = "none";
      span.style.display = "none";
    };
  }
};

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href="" class="name" target="_blank">BOOM AND DOOM</a>
				</h3>
      <p>
        By: Zerkaa
      </p>
      <span>
					129,702 views - 2 months ago 
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
				<a href="" class="name" target="_blank">CLOWN DEATH RUN</a>
				</h3>
      <p>
        By: KSI
      </p>
      <span>
					176,977 - 3 months ago
				</span>
      <button class="hide clicked" onclick="showhide()">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
					<a href="" class="name" target="_blank">BREACH WALL ADVENTURE</a>
				</h3>
      <p>
        By: MM7GAMES
      </p>
      <span>
					135,782 - 4 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a  href=";list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" class="name" target"=_blank">FINISH LINE TUNNEL</a>
				</h3>
      <p>
        By: W2S
      </p>
      <span>
					104,169 views 5 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href=";list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" class="name" target="_blank">INSANE MOUNTAIN RAMP</a>
				</h3>
      <p>
        By: TBJZL
      </p>
      <span>
					181,137 views 6 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
  </ul>
</div>

window.onload = function() {

  var listItems = document.querySelectorAll("#myList li");

  for (var i = 0; i < listItems.length; i++) {
    var item = listItems[i];

    item.querySelector(".hide").onclick = function(e) {
      var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

      img.style.display = "none";
      header.style.display = "none";
      elemA.style.display = "none";
      elemP.style.display = "none";
      span.style.display = "none";
    };
  }
};

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href="https://www.youtube./watch?v=GCFR26D5ofA" class="name" target="_blank">BOOM AND DOOM</a>
				</h3>
      <p>
        By: Zerkaa
      </p>
      <span>
					129,702 views - 2 months ago 
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
				<a href="https://www.youtube./watch?v=yw3tTTIZyf4" class="name" target="_blank">CLOWN DEATH RUN</a>
				</h3>
      <p>
        By: KSI
      </p>
      <span>
					176,977 - 3 months ago
				</span>
      <button class="hide clicked" onclick="showhide()">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
					<a href="https://www.youtube./watch?v=0EXLxuosFAc" class="name" target="_blank">BREACH WALL ADVENTURE</a>
				</h3>
      <p>
        By: MM7GAMES
      </p>
      <span>
					135,782 - 4 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a  href="https://www.youtube./watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" class="name" target"=_blank">FINISH LINE TUNNEL</a>
				</h3>
      <p>
        By: W2S
      </p>
      <span>
					104,169 views 5 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href="https://www.youtube./watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" class="name" target="_blank">INSANE MOUNTAIN RAMP</a>
				</h3>
      <p>
        By: TBJZL
      </p>
      <span>
					181,137 views 6 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
  </ul>
</div>

Share Improve this question edited Jul 26, 2015 at 19:04 asked Jul 26, 2015 at 18:26 Endrit Shala 1412 silver badges15 bronze badges

3 you should try to isolate the problems to few and post all relevant code only, and not just dump all css,js, and html files. this way you will get answer. – Muhammad Umer Commented Jul 26, 2015 at 18:35
AngularJS would make your life easier, its very simple to deal with things like this. Just a suggestion. – Daniel Kobe Commented Jul 26, 2015 at 18:36
3 wont advice to add angularjs lib just for toggling functionality – Muhammad Umer Commented Jul 26, 2015 at 18:37
Can you include a working JSFiddle? – Daniel Kobe Commented Jul 26, 2015 at 18:53
1 by the way, you have an error in your 4th li > h3 > a target attribute – Rohit Kumar Commented Jul 26, 2015 at 18:55

| Show 1 more ment

7 Answers 7

Sorted by: Reset to default 2

I know what you want. You want the contents to hide or display accordingly and the text of the button to be 'Hide' or 'Show' accordingly. Am I right? If yes, then I've created a JSFiddle, check it out, its working -
http://jsfiddle/g6kjrc08/

Try using a little CSS to make your life easier.

window.addEventListener("load", function () {

  var listItems = document.querySelectorAll("#myList > li");

  Array.prototype.forEach.call(listItems, function (item) {
    item.querySelector(".hide").addEventListener("click", function () {
      item.classList.toggle("hidden");

      if (this.textContent === "Hide") {
        this.textContent = "Show";
      } else {
        this.textContent = "Hide";
      }
    });
  });
});

.hidden :not(.hide) {
  display: none;
}

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=GCFR26D5ofA" target="_blank">BOOM AND DOOM</a></h3>

      <p>By: Zerkaa</p><span>129,702 views - 2 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=yw3tTTIZyf4" target="_blank">CLOWN DEATH RUN</a></h3>

      <p>By: KSI</p><span>176,977 - 3 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=0EXLxuosFAc" target="_blank">BREACH WALL ADVENTURE</a></h3>

      <p>By: MM7GAMES</p><span>135,782 - 4 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" target="_blank">FINISH LINE TUNNEL</a></h3>

      <p>By: W2S</p><span>104,169 views 5 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" target="_blank">INSANE MOUNTAIN RAMP</a></h3>

      <p>By: TBJZL</p><span>181,137 views 6 months ago</span> <button class="hide clicked">Hide</button>
    </li>
  </ul>
</div>

Or if you only want to use JavaScript:

window.addEventListener("load", function () {

  var listItems = document.querySelectorAll("#myList > li");

  Array.prototype.forEach.call(listItems, function (item) {
    var descendants = item.querySelectorAll(":not(.hide)");

    item.querySelector(".hide").addEventListener("click", function () {
      Array.prototype.forEach.call(descendants, function (descendant) {
        if (descendant.style.display === "none") {
          descendant.style.display = "";
        } else {
          descendant.style.display = "none";
        }
      });

      if (this.textContent === "Hide") {
        this.textContent = "Show";
      } else {
        this.textContent = "Hide";
      }
    });
  });
});

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=GCFR26D5ofA" target="_blank">BOOM AND DOOM</a></h3>

      <p>By: Zerkaa</p><span>129,702 views - 2 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=yw3tTTIZyf4" target="_blank">CLOWN DEATH RUN</a></h3>

      <p>By: KSI</p><span>176,977 - 3 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=0EXLxuosFAc" target="_blank">BREACH WALL ADVENTURE</a></h3>

      <p>By: MM7GAMES</p><span>135,782 - 4 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" target="_blank">FINISH LINE TUNNEL</a></h3>

      <p>By: W2S</p><span>104,169 views 5 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube./watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" target="_blank">INSANE MOUNTAIN RAMP</a></h3>

      <p>By: TBJZL</p><span>181,137 views 6 months ago</span> <button class="hide clicked">Hide</button>
    </li>
  </ul>
</div>

take a look at this code it's more maintainable, modular, and pact...

http://jsfiddle/techsin/shcr2w4s/

var btns = toArray(document.getElementsByClassName('hide'));

btns.forEach(function (x) {
    var ele = x.parentElement.querySelector('.cont');
    var style = ['block','none'],
        text = ['Hide', 'Show'],
        n = 0;
    x.addEventListener('click', function (e) {
        n = (n==1)?0:1;
        x.innerText = text[n];
        ele.style.display = style[n];
    });

});


function toArray(x) {
    var arr = [];
    for (var i = 0; i < x.length; i++) arr.push(x[i]);
    return arr;
}

also note change in html structure, it's better to hide one element instead of hiding every single element. Not only it's more error prone, but not all elements can be brought back to original state with display:block, as some might be inline-block, table, inline etc.

Had you used jquery this could've been done like this

http://jsfiddle/techsin/shcr2w4s/1/

var text = ['Hide', 'Show'];

$('button[class="hide"]').click(function () {
    var t = $(this);
    t.siblings('.cont').toggle();
    t.text(text[(text.indexOf(t.text()) + 1) % text.length]);
});

For the changing text, why don't use Inner.html ?

Like putting this.innerHTML = 'Show'; in your item.querySelector(".hide").onclick function

Or include Jquery to use .html()

I would add a "hidden" attribute (i.e <p hidden = 'true'></p>) to the elements that you want to toggle hidden or visible, and then use element.setAttribute("hidden", true); to hide the element and use the value 'false' to show that element again. I would make a function for both show and hide so that you can just call the function in your .onclicks to make your life much more simple.

I think u want something like this.

$('#toggle-Button').on('click', function(){
  if( $(this).val() == 'show' )
    $(this).val('hide');
  else
    $(this).val('show');
  
  $('#some-div').toggle();
    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="toggle-Button" type="button" value="hide" />

<div id="some-div">
  some text
</div>

Try this js code

var listItems = document.querySelectorAll("#myList li");

for (var i = 0; i < listItems.length; i++) { var item = listItems[i];

item.querySelector(".hide").onclick = function (e) {
    if(this.innerText == "Hide"){
        this.innerText="Show";
    var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

    img.style.display = "none";
    header.style.display = "none";
    elemA.style.display = "none";
    elemP.style.display = "none";
    span.style.display = "none";
    }
    else{
        this.innerText="Hide";
    var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

    img.style.display = "inline";
    header.style.display = "block";
    elemA.style.display = "block";
    elemP.style.display = "block";
    span.style.display = "inline";
    }
};

}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HideShow elements by clicking only one button - Stack Overflow

7 Answers 7

Had you used jquery this could've been done like this

与本文相关的文章

评论列表(0)