Ответ 1

В зависимости от того, какие браузеры/устройства вы хотите поддерживать или что вы готовы смириться с несовместимыми браузерами, вы можете проверить теги <summary> и <detail>. Они предназначены именно для этой цели. Css вообще не требуется, поскольку сведение и показ являются частью определения/форматирования тегов.

Я привел пример здесь:

<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>

Поддержка браузера меняется. Попробуйте в webkit для достижения наилучших результатов. Другие браузеры могут по умолчанию показывать все решения. Возможно, вы можете вернуться к методу hide/show, описанному выше.

Ответ 2

Использование <summary> и <details>

Использование элементов <summary> и <details> является самым простым, но вы видите поддержку браузера, поскольку текущий IE не поддерживает его. Вы можете заполнить все же (большинство из них на основе jQuery). Обратите внимание, что неподдерживаемый браузер, конечно, просто покажет расширенную версию, так что в некоторых случаях это может быть приемлемо.

/* Optional styling */
summary::-webkit-details-marker {
  color: blue;
}
summary:focus {
  outline-style: none;
}

<details>
  <summary>Summary, caption, or legend for the content</summary>
  Content goes here.
</details>

Ответ 3

Вам просто нужно выполнить итерацию якорей в двух ссылках.

<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>

См. этот jsfiddle http://jsfiddle.net/eJX8z/

Я также добавил некоторый запас для ответа на часто задаваемый вопрос, чтобы улучшить формат.

Ответ 4

@gbtimmon answer это здорово, но слишком сложно. Я упростил его код настолько, насколько смог.

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: inherit; 
}

<a href="#hide" id="hide">Show</a>
<a href="#" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>

Ответ 5

Или супер простая версия с едва ли css:)

<style>   
.faq ul li {
    display:block;
    float:left;
    padding:5px;
}

.faq ul li div {
    display:none;
}

.faq ul li div:target {
    display:block;
}


</style>


<div class="faq">
   <ul>
   <li><a href="#question1">Question 1</a>   
   <div id="question1">Answer 1 </div>
   </li>


   <li><a href="#question2">Question 2</a>
   <div id="question2">Answer 2 </div>
   </li>
   <li><a href="#question3">Question 3</a>
   <div id="question3">Answer 3 </div>
   </li>
   <li><a href="#question4">Question 4</a>
   <div id="question4">Answer 4 </div>
   </li>
   <li><a href="#question5">Question 5</a>
   <div id="question5">Answer 5 </div>
   </li>
   <li><a href="#question6">Question 6</a>
   <div id="question6">Answer 6 </div>
   </li>
   </ul>  
</div>

http://jsfiddle.net/ionko22/4sKD3/

Ответ 6

Что-то вроде этого?

document.getElementById("control").addEventListener('click', function() {
  var props = document.getElementsByClassName("property");
  for (var i = 0; i < props.length; i++) {
    props[i].classList.toggle("show");
  }   
});

#control{
  height:24px;
  width:24px;
  background:blue;
}
.property{
  height:0px;
  overflow: hidden;
  transition: 4s ease-in-out;
  font-size:0px;
  margin:0;
  border:1px solid green;
}
.show{
  height:1em;
  overflow:initial;
  font-size:12px;
}

<div id="control"></div>
<div class="property">red</div>
<div class="property">blue</div>
<div class="property">green</div>