Блок для аккордеона

424

07 февраля 2017, 18:56

Здравствуйте,Подскажите пожалуйста как сделать такой блок ? Пробовал сделать контейнер,в котором делаю обводку,и поместить в контейнер 2 дива (левый и правый),только горизонтальную линию после '-' не получается поставить ,и когда увеличиваю '-' через фонт сайз - то весь блок летит

Answer 1

li{list-style: none;margin-bottom: 10px;} 
 
.line{ 
  color: #4f92bc; 
  border: 1px solid #ededed; 
  display: inline-block; 
} 
.line div{ 
  display: inline-block; 
  padding: 10px; 
} 
.line div:nth-child(1){ 
  border-right: 1px solid #ededed; 
} 
.line div:nth-child(2){ 
  padding-right: 20px; 
}

<ul> 
  <li> 
    <div class='line'> 
      <div>-</div> 
      <div>Lorem ipsum</div> 
    </div> 
  </li> 
  <li> 
    <div class='line'> 
      <div>-</div> 
      <div>Dolor sit amet</div> 
    </div> 
  </li> 
  <li> 
    <div class='line'> 
      <div>-</div> 
      <div>Nisi, voluptatem</div> 
    </div> 
  </li> 
</ul>

Answer 2

считаете что Ваш велосипед будет самый велосипед? аккордеон есть во всех библиотеках - например jQuery UI -

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
<div id="accordion">
  <h3>Section 1</h3>
  <div><p>1</p></div>
  <h3>Section 2</h3>
  <div><p>2</p></div>
  <h3>Section 3</h3>
  <div><p>3</p></div>
  <h3>Section 4</h3>
  <div><p>4<p></div>
</div>
</body>
</html>

А здесь пример горизонтального.

Тире увеличивать через font-size чтобы добиться нужной ширины конечно прикольная идея... :-) Такие идеи приходят обычно после 16-часового рабочего дня - ложитесь спать а завтра нарисуйте тире-картинку :-))