Html + Css FAQ creation

Asked

Viewed 4,380 times

3

Good Afternoon, I just started evolving my html+css for creating web pages so someone can give me a hint on how to do what is asked in the image below?inserir a descrição da imagem aqui.

Basically when we click on the area where the arrow is in the right corner the programming causes a box to appear below with text and clicking again it disappears. Like a hidden box that only appears when you click on the question and the answer appears.

Thanks for the help

php javascript html css

  • I couldn’t understand... be clearer please

  • Get it this way

  • You are looking for a Accordion. See if this is it and add your question, it will be easier to understand it like this

  • An example with Sass and HTML only: https://codepen.io/abergin/pen/ihlDf

3 answers

3

You can use the same technique of that answer and create an effect of "toggle" only with HTML and CSS:

.question {
  border-bottom: 1px solid #ccc;
  padding: 10px 0
}

.question input,
.question .answer { display: none }

.question label {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 5px;
  width: 100%
}

.question input:checked ~ .answer {
  display: block
}
<div class='question'>
  <input type='checkbox' id='question-1'>
  <label for='question-1'>Primeira pergunta?</label>
  <div class='answer'>
    Primeira resposta.
  </div>
</div>

<div class='question'>
  <input type='checkbox' id='question-2'>
  <label for='question-2'>Segunda pergunta?</label>
  <div class='answer'>
    Segunda resposta.
  </div>
</div>

0

I think if I understand your question, I’ll give you some references. I advise the bootstrap, because if it is starting yet, I advise getting something ready to then risk doing from scratch. Here is the link of the references and the code below. I hope I have adjusted!! http://www.w3schools.com/bootstrap/bootstrap_collapse.asp http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>

0

The behavior you refer to is called accordion or Collapse.

See an example of Collapse with Bootstrap: http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp

You can do it on hand, take this example: http://www.w3schools.com/howto/howto_js_accordion.asp

Html

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Css

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
}

div.panel.show {
    display: block;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

button.accordion:after {
    content: '\02795'; 
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

Javascript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.