Можно как то этот код упростить?

Question

[Антон]

https://jsfiddle.net/d9jybzs1/

Суть в том что по нажатию меняется дата и появляется определенный контент, я в js слабоват, но написал как умею, знатоки как то это можно сделать намного компактнее и проще?

Answer 1

[sincopa]

<div class='arrow'>
  <div class='next'></div>
  <div class='prev'></div>
</div>
<div class='date'>
  <div id='d1'>2017</div>
  <div id='d2'>2016</div>
</div>
<div class='content'>
  <div data-content='d1'>1</div>
  <div data-content='d2'>2</div>
</div>

При клике на next или prev добавляем в date элементу класс
<div id='d1' class='date-active'>2017</div>
Для активного блока ищем контент где id = data-content и также добавляем класс

<div data-content='d1' class='content-active'>1</div>

как то так я бы сделал

Comments

[Антон]

И как же это реализовать на js ?

[sincopa]

Антон, погугли простой слайдер на jquery, к примеру ЭТО. Добавить еще функцию по поиску контента и все... или если объединить блоки, то и дописывать по сути не надо ничего...

<div class='container'>
  <div class='content content_active'>
    <div>2017</div>
    <div>text 1</div>
  </div>
  <div class='content'>
    <div>2016</div>
    <div>text 2</div>
  </div>
</div>

[Антон]

sincopa, ну я сделал на owl-carousel, но теперь не знаю как сделать контент активным когда выбрана дата)

[sincopa]

Антон, Вот Лови, дальше сам крути верти )

[Антон]

sincopa, Спасибо все прекрасно работает, не подскажешь как сделать прокрутку в модальном окне по нажатию?

$('html, body').animate({
scrollTop: $('#texts').offset().top - 60
}, 1000);

Он прокручивает саму страницу а не контент в модальном окне..

[sincopa]

Антон, работай с модальным окном, а не с html, body

[Антон]

sincopa, пытался, тоже не робит, обычное bootstrap модальное окно

[sincopa]

Антон, не работаю с бутстрапом, и не работал ни разу)