Question 45618 in CSS Question posted in
Some basic documentation can be found here.

how to make button stay pressed down until pressed again – CSS

i have a button that expands a section with background image to show hidden text, but how do i make it so that i can just press the button once instead of haviing to hover it or hold down? and then press it again to return to its default state

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>TITLE</title>
    </head>

<body>
    
    
      <div class="mainPic">
         <section>
            
           <header style="text-align: center;">
            <h1>TITLE & info</h1>
           </header>

           <div id="hidden-content">
        
                <label class="bottom-arrow" for="trigger"></label>
              <div id="list">
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
              </div>
           </div>
                  
          </section>
      </div>
    
    
</body>
</html>

@charset "utf-8";

body{
    background-color: white;
}

.mainPic{
    
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    
    background-size: cover;
    
    border: 1px solid black;
}

h1{
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;

    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    
}

.bottom-arrow{
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
}

/*Custom CSS*/
section{position:relative;}

#hidden-content #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

#hidden-content:active #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

#hidden-content:active .bottom-arrow{
  position:absolute;
  bottom:-25px;
  transition: 0.25s ease-out;
}

………………………………………………………………

Tags:

3

Answers


  1. 0

    I have never found a CSS-only solution regarding something like this, so using a splash of Javascript will help to toggle a different state using a class on your hidden-content container. Then, using the presence of the new class, you can edit the appearance of your HTML elements.

    In other words, adding and removing a class can allow you to update it’s appearance.

    var trigger = document.querySelector('.bottom-arrow');
trigger.addEventListener('click', function(){
  document.getElementById('hidden-content').classList.toggle('active');
});
    body{
    background-color: white;
}

.mainPic{
    
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    
    background-size: cover;
    
    border: 1px solid black;
}

h1{
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;

    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    
}

.bottom-arrow{
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
}

/*Custom CSS*/
section{position:relative;}

#hidden-content #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

#hidden-content.active #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

#hidden-content.active .bottom-arrow{
  position:absolute;
  bottom:-25px;
  transition: 0.25s ease-out;
}
    <div class="mainPic">
   <section>
     <header style="text-align: center;">
        <h1>TITLE & info</h1>
     </header>

     <div id="hidden-content">
        <label class="bottom-arrow" for="trigger"></label>
        
        <div id="list">
          <div>hidden text</div>
          <div>hidden text</div>
          <div>hidden text</div>
          <div>hidden text</div>
          <div>hidden text</div>
          <div>hidden text</div>
        </div>
     </div>
    </section>
</div>
    Login or Signup to reply.
  2. 0

    Technically speaking you don’t have a button. HTML standard includes a button element which is what people think of when speaking of buttons in web pages / web apps.

    You want to toggle the hidden attribute based on the click event of an element.

    var label = document.querySelector("label");

label.addEventListener("click", function () {
document.getElementById("list").toggleAttribute("hidden");
});
    <section>

<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>

<div id="hidden-content">

<label class="bottom-arrow" for="trigger">CLICK ME</label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>

</section>
    Login or Signup to reply.
  3. 0

    Using a checkbox with the label allows you to use its state.

    body {
  background-color: white;
}

.mainPic {
  background-image: url("images/background.webp");
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid black;
}

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 200;
  padding: 0;
  margin: 0;
  font-size: 75px;
  text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}

.bottom-arrow {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 25px solid #6A0136;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  cursor: pointer;
}


/*Custom CSS*/

section {
  position: relative;
}

#hidden-content #list {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

#trigger {
  display: none;
}

#trigger:checked + label + #list {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

#trigger:checked + label.bottom-arrow {
  position: absolute;
  bottom: -25px;
  transition: 0.25s ease-out;
}
    <div class="mainPic">
  <section>

    <header style="text-align: center;">
      <h1>TITLE & info</h1>
    </header>

    <div id="hidden-content">

      <input type="checkbox" id="trigger">
      <label class="bottom-arrow" for="trigger"></label>
      <div id="list">
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
        <div>hidden text</div>
      </div>
    </div>

  </section>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search