Html + Css creation of frequently asked questions

Navigation
3

Good afternoon, I started shortly to evolve my html + css for creating web pages will anyone be able to give me a hint how to do what is requested in the image below? .

Basically when we click on the area where the arrow in the right corner has the programming, a box with text appears and clicking again disappears. Like a hidden box that only appears when we click on the question and the answer appears.

Thanks for the help

    
asked by anonymous 05.12.2016 / 19:20

3 answers

3

You can use the same technique and create a "toggle" effect "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>
    
05.12.2016 / 20:54
0

I think if I understand your question, I'll give you some references. I advise the bootstrap, because if it is still starting, I advise to take something ready and then risk doing it from scratch. Follow the link of the references and the code below. I hope I have it !! link link 

<!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><scriptsrc="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>
    
05.12.2016 / 19:38
0

The behavior you are referring to is called accordion or collapse.

See a collapse example with Bootstrap : link

You can do this in hand , see this example: link

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: '795'; 
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "96";
}

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");
    }
}
    
05.12.2016 / 19:44
CSS Hide Elements using css only Grouping SQL queries