Создавать элементы desplegable для страницы html5

Добрый день люди,

Я нуждаюсь в том, чтобы создать страницу помощи, где он ввел титул, и нажав развернулся текст. Оно было бы чем-то похожим на следующее изображение: Página ejemplo ayuda

3
задан 01.07.2016, 14:36
3 ответа

Прямо официальной страницы w3:

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");
  }
}
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

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

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

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;
}
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>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.</p>
</div>
2
ответ дан 24.11.2019, 13:57

Альтернатива без необходимости использовать язык сценариев JavaScript, только используя HTML5 и CSS3. Идея сходная с идеей этого другого вопроса: использовать скрытый checkbox и label, рядом с предыдущим селектором ~ чтобы показывать / спрятаться описание в вопрос.

В нормальном состоянии, описание скрытое, но когда помечается checkbox (благодаря label, без необходимости языка сценариев JavaScript), тогда div что содержит ответ на вопрос, появляется (делая селектор как input:checked ~ div).

Немного как это:

.qa {
  margin-bottom:10px;  
}
.qa input {
  display:none;
}
.qa label {
  display:block;
  height:30px;
  line-height:30px;
  font-weight:bold;
  text-transform:uppercase;
}
.qa label:before {
  content:"+";
  display:inline-block;
  height:30px;
  width:30px;
  background:#ccc;
  color:White;
  text-align:center;
  margin-right:10px;
}
.qa div {
  display:none;
  padding-top:5px;
}
.qa input:checked ~ label:before {
  content:"-";
  background:#3a4;
}
.qa input:checked ~ div {
  display:block;
}
<div class="qa">
  <input type="checkbox" id="qa0" />
  <label for="qa0">Lorem ipsum dolor sit amet?</label>
  <div>
    Consectetur adipiscing elit. Nulla fermentum lacinia efficitur. Curabitur eget lobortis magna, eu placerat ligula. Integer commodo felis in nibh condimentum, at volutpat justo rhoncus. Vivamus eget est id tortor luctus dapibus in sed nisl. Aenean porttitor lacinia facilisis. Duis lobortis euismod ipsum, eget sodales ipsum efficitur vitae.
  </div>
</div>

<div class="qa">
  <input type="checkbox" id="qa1" />
  <label for="qa1">Aenean in mauris quis nisi ornare aliquet?</label>
  <div>
    Nulla dolor nulla, cursus non justo non, iaculis tempor tellus. Vestibulum scelerisque nisl eget erat dignissim, in laoreet diam auctor. Fusce rhoncus justo a ipsum elementum commodo. In et quam vel tortor commodo tempus. Fusce sem risus, euismod sit amet gravida nec, finibus quis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida leo vel velit viverra commodo.
  </div>
</div>

"Недостаток" этого решения состоит в том, что он позволяет многообразные вопросы, быть открытыми в то же время, хотя не определяется ничто в вопросе, если это требование или нет. Другой недостаток (этот раз без кавычек) состоит в том, что это не просто, оживления (было бы возможно делать с переходами CSS, но идеальное состояло бы в том, чтобы происходить height 0 в auto и браузеры не выносят оживление с auto).

0
ответ дан 24.11.2019, 13:57
  • 1
    Большое спасибо из-за aluvi и # 243; n ответов!!! Очень благодарный – Aaron VC 04.07.2016, 14:37

Nose, если ты использовал Bootstrap, но, а, я рекомендую тебе это использовать, потому что одна из функциональности, которая у него есть, состоит в том, чтобы делать именно то, что ты просишь, тебя показываю url, где ты можешь видеть пример в использовании: http://getbootstrap.com/javascript/#collapse-example-accordion

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

TambiГ©n ты можешь делать это с jquery: http://plugins.jquery.com/ui.accordion/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>


</body>
</html>

Надеялся, что он подает тебе

0
ответ дан 24.11.2019, 13:57
  • 1
    Если я это использовал bootstrap, но в Intel XDK, который является программой, где я разрабатываю app, он не позволяет использовать bootstrap, потому что, а быть и # 237; в наслаждение. Большое спасибо. – Aaron VC 01.07.2016, 13:56