how to hide/show content when button pressed? - Telegram

iammgt
March 21, 2019
207 views
3 votes
5 Answers

I am designing a website and I want to show the content just when they click on a button and hide when they click again.
I was able to find a solution but I have to write a different function for all buttons. I tried a few things but couldn’t make it. I’ll be so glad if you help me. 😉

I hide the buttons by display: none; and the button works with this function :

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

I have to write a different function for all button.
is there a way that I use this for all?

I tried this but it didn’t work :

  function funcategory(x) {
  var a = document.getElementById(x);
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

and here’s the content which has to be shown whrn the button click(and be hiden when clicked again):

<!--category------------------------------------------------->
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

here is the main button:

<button id="topbtn" onclick="funcategory()">Category</button

here is the full code:

<!DOCTYPE html>

<html>

<head>
<title>balalar</title>

<style>

body{
    background-color: #ff5993; }

#topbtn{
    background-color: #bf42f4;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#categorybtn{
    background-color: #ff7700;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#category{
    display: none;}

#contactus{
    background-color: #dddddd;
    font-size: 25px;
    display: none;}





</style>
<script>

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

</head>


<body>

<h1 color="#0e0a0e"><center>BALALAR</center></h1>

<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>

<hr color="black" style="height: 3px; width: 1100px"/>

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus">
    <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>



</body>

</html>

Answers

First of all id cannot be duplicate. You can use class as an alternative. and use document.querySelectorAll to get all the buttons. Also add an attribute data-type you can name it any thing but has to have data- as prefix & data-button value will be used to target the section which will be hidden/shown. For example check the data-type of the section. After that you can use classList.toggle which will hide/remove class to toggle the visibility

document.querySelectorAll('.topbtn').forEach(function(item) {
  let getBtnData = item.dataset.button;
  item.addEventListener('click', function(e) {
    document.querySelector('[data-type="' + getBtnData + '"]').classList.toggle('visibility')
  })

})

body {
  background-color: #ff5993;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#category {
  display: none;
}

#contactus {
  background-color: #dddddd;
  font-size: 25px;
  display: none;
}

.visibility {
  display: block !important;
}

<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<center>
  <button class="topbtn" data-button='contact'>Contact us</button>
  <button class="topbtn">Random</button>
  <button class="topbtn" data-button='category'>Category</button>
  <!--<button id="topbtn">All</button>
  <button id="topbtn">Mine</button>
  <button id="topbtn">Top</button>
  <button id="topbtn">Log in</button>-->
</center>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category" data-type='category'>
  <center>
    <button id="categorybtn">Actors</button>
    <button id="categorybtn">Singers</button>
    <button id="categorybtn">Instagram user</button>
    <button id="categorybtn">Model</button>
    <button id="categorybtn">Others</button>
    <button id="categorybtn">XXX</button>
  </center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus" data-type='contact'>
  <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>

1) Don’t use the same id to define elements, it must be unique in a document..

2) You can send the id: onclick="funcategory(this.id)" to differentiate which one you want to manipulate.

3) Example of reusable function:

var funcategory= function(e) {
  var a = document.getElementById(e+'content');
  if (a.style.display != "block") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

4) You forgot to close center tag. Which are obsolete by now, alternatively you could use CSS text-align: center;

body {
  background-color: #ff5993;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

.categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

#categorycontent {
  display: none;
}

#contactcontent {
  background-color: #dddddd;
  font-size: 25px;
  display: none;
}

<script>
var funcategory= function(e) {
  var a = document.getElementById(e+'content');
  if (a.style.display != "block") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<center>
  <button id="contact" class="topbtn" onclick="funcategory(this.id)">Contact us</button>
  <button id="random" class="topbtn">Random</button>
  <button id="category" onclick="funcategory(this.id)" class="topbtn">Category</button>
  <button id="all" class="topbtn">All</button>
  <button id="mine" class="topbtn">Mine</button>
  <button id="top" class="topbtn">Top</button>
  <button id="login" class="topbtn">Log in</button>
  <!-- do not  ^^^ use same id -->
</center>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="categorycontent">
  <center>
    <button id="actor" class="categorybtn">Actors</button>
    <button id="singer" class="categorybtn">Singers</button>
    <button id="iguser" class="categorybtn">Instagram user</button>
    <button id="label" class="categorybtn">Model</button>
    <button id="other" class="categorybtn">Others</button>
    <button id="xxx" class="categorybtn">XXX</button>
    <!-- do not ^^^ use same id -->
  </center>
</div>

<!--contact us----------------------------------------------->
<div id="contactcontent">
  <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
  </center>
  <!-- << notice missing / >
</div>

 function funcategory(elem) {
  if (elem.style.display === "none") {
    elem.style.display = "block";
  } else {
    elem.style.display = "none";
  }
}

<div id="category">
<center>
<button id="categorybtn" onclick="funcategory(this)">Actors</button>
<button id="categorybtn" onclick="funcategory(this)">Singers</button>
<button id="categorybtn" onclick="funcategory(this)">Instagram user</button>
<button id="categorybtn" onclick="funcategory(this)">Model</button>
<button id="categorybtn" onclick="funcategory(this)">Others</button>
<button id="categorybtn" onclick="funcategory(this)">XXX</button>
</center>
</div>

<!DOCTYPE html>

<html>

<head>
<title>balalar</title>

<style>

body{
    background-color: #ff5993; }

#topbtn{
    background-color: #bf42f4;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#categorybtn{
    background-color: #ff7700;
    border: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #0e0a0e;
    cursor: pointer;}

#category{
    display: none;}

#contactus{
    background-color: #dddddd;
    font-size: 25px;
    display: none;}





</style>
<script>

function funcategory() {
  var a = document.getElementById("category");
  if (a.style.display === "") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}
</script>

</head>


<body>

<h1 color="#0e0a0e"><center>BALALAR</center></h1>

<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>

<hr color="black" style="height: 3px; width: 1100px"/>

<!--invisible----------------------------------------------->

<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>

<!--contact us----------------------------------------------->
<div id="contactus">
    <center>
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
    <center>
</div>



</body>

</html>

you want to show the content when the Category button is clicked and you want to hide the content if the category button is clicked again. Is that what you want ?

If so instead of checking

if (a.style.display === “none”)

you can check as

if (a.style.display === “”)

If you want to avoid javascript all together, you can do this with a check box and some fancy css.

Here we use the label tag with an associated check box. Clicking the label toggles the status of the checkbox. We can then use the :checked pseudo class with ~ , the Adjacent sibling selector to toggle display:none;

/*This is the magic - Hide the div next to a checkbox that is checked. 
It will show when unchecked courtesy of the associated label */
.toggler:checked + div {
  display:none;
}

/*HIde our toggling checkboxes*/
.toggler {display:none;}


body {
  background-color: #ff5993;
}

.centered {
text-align:center;
}

.topbtn {
  background-color: #bf42f4;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}

.categorybtn {
  background-color: #ff7700;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 6px;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  color: #0e0a0e;
  cursor: pointer;
}




#contactus {
  background-color: #dddddd;
  font-size: 25px;
}

<h1 color="#0e0a0e">
  <center>BALALAR</center>
</h1>

<div class="centered">
  <label class="topbtn" for="cb-contact">Contact us</label>
  <label class="topbtn">Random</label>
  <label class="topbtn" for="cb-category">Category</label>  
</div>

<hr color="black" style="height: 3px; width: 1100px" />

<!--invisible----------------------------------------------->

<!--category------------------------------------------------> 
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-category" class="toggler" checked />
<div id="category" data-type='category' class="centered">
    <button class="categorybtn">Actors</button>
    <button class="categorybtn">Singers</button>
    <button class="categorybtn">Instagram user</button>
    <button class="categorybtn">Model</button>
    <button class="categorybtn">Others</button>
    <button class="categorybtn">XXX</button>
</div>

<!--contact us----------------------------------------------->
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-contact" class="toggler" checked />
<div id="contactus" data-type='contact' class="centered">
    <p>instagram: <a href="https://www.instagram.com/iammgt/?hl=en">@iammgt</a></p>
    <p>telegram: @iammgt</p>
    <p>phone: 0935-185-1433</p>
    <p>phone2: 0990-4631983</p>
</div>

You should also note the center tag is obsolete and should no longer be used. Use CSS instead. And as everyone else has mentioned, id must be unique on the page, use classes instead.

Please signup or login to give your own answer.

Click here to cancel reply.

how to hide/show content when button pressed? – Telegram

Answers