Accordion/Tabs/Cards

HTML

              
                <div class="container">

  <div class="services">
    
    <div class="services__tabs">
      <ul class="tabs">
        <li class="tabs__item tab">
          <div class="tab__title">
            <a href="#" class="tab__link">Услуги 1С-Программиста</a>
            <i class="tab__icon"></i>
          </div>
          <div class="tab__content">
            <div class="mini-card">
              <div class="mini-card__header"><span class="cost">от 1000 руб</span></div>
              <div class="mini-card__content">
                <p>В случае, если для Вас очень важно, чтобы первичные документы (договора, акты, накладные и т.д) остались на территории Вашего орфиса или их объем настолько большой, что их перемещение тановится проблематичным и экономически не оправданным, мы готовы предоставить Вас такую услугу, как "приходящий бухгалтер".</p>
                <p>То есть, за Вашей компанией будет прикреплен конкретный сотрудник, который будет профиссионально выполнять функции главного бухгалтера непосредственно в Вашем офисе. При этом, Вам не нужно будет платить ему зарпоаиу, налоги и нести прочие издержки как с бухгалетром в штате</p>
              </div>
              <div class="mini-card__footer"><a href="#" class="button">Заказать</a></div>
            </div><!-- //.mini-card -->
          </div><!-- //.tab__content -->
        </li><!-- //.tab -->
        <li class="tabs__item tab">
          <div class="tab__title">
            <a href="#" class="tab__link">Оптимизация налогообложения</a>
            <i class="tab__icon"></i>
          </div>
          <div class="tab__content">
            <div class="mini-card">
              <div class="mini-card__header"><span class="cost">от 1000 руб</span></div>
              <div class="mini-card__content">
                <p>В случае, если для Вас очень важно, чтобы первичные документы (договора, акты, накладные и т.д) остались на территории Вашего орфиса или их объем настолько большой, что их перемещение тановится проблематичным и экономически не оправданным, мы готовы предоставить Вас такую услугу, как "приходящий бухгалтер".</p>
                <p>То есть, за Вашей компанией будет прикреплен конкретный сотрудник, который будет профиссионально выполнять функции главного бухгалтера непосредственно в Вашем офисе. При этом, Вам не нужно будет платить ему зарпоаиу, налоги и нести прочие издержки как с бухгалетром в штате</p>
              </div>
              <div class="mini-card__footer"><a href="#" class="button">Заказать</a></div>
            </div><!-- //.mini-card -->
          </div>
        </li><!-- //.tab -->
        <li class="tabs__item tab">
          <div class="tab__title">
            <a href="#" class="tab__link">Бухгалтерское сопровождение бизнеса</a>
            <i class="tab__icon"></i>
          </div>
          <div class="tab__content">
            <div class="mini-card">
              <div class="mini-card__header"><span class="cost">от 1000 руб</span></div>
              <div class="mini-card__content">
                <p>В случае, если для Вас очень важно, чтобы первичные документы (договора, акты, накладные и т.д) остались на территории Вашего орфиса или их объем настолько большой, что их перемещение тановится проблематичным и экономически не оправданным, мы готовы предоставить Вас такую услугу, как "приходящий бухгалтер".</p>
                <p>То есть, за Вашей компанией будет прикреплен конкретный сотрудник, который будет профиссионально выполнять функции главного бухгалтера непосредственно в Вашем офисе. При этом, Вам не нужно будет платить ему зарпоаиу, налоги и нести прочие издержки как с бухгалетром в штате</p>
              </div>
              <div class="mini-card__footer"><a href="#" class="button">Заказать</a></div>
            </div><!-- //.mini-card -->
          </div>
        </li><!-- //.tab -->
        <li class="tabs__item tab">
          <div class="tab__title">
            <a href="#" class="tab__link">Сдача нулевой отчетности ИП и ООО</a>
            <i class="tab__icon"></i>
          </div>
          <div class="tab__content">
            <div class="mini-card">
              <div class="mini-card__header"><span class="cost">от 1000 руб</span></div>
              <div class="mini-card__content">
                <p>В случае, если для Вас очень важно, чтобы первичные документы (договора, акты, накладные и т.д) остались на территории Вашего орфиса или их объем настолько большой, что их перемещение тановится проблематичным и экономически не оправданным, мы готовы предоставить Вас такую услугу, как "приходящий бухгалтер".</p>
                <p>То есть, за Вашей компанией будет прикреплен конкретный сотрудник, который будет профиссионально выполнять функции главного бухгалтера непосредственно в Вашем офисе. При этом, Вам не нужно будет платить ему зарпоаиу, налоги и нести прочие издержки как с бухгалетром в штате</p>
              </div>
              <div class="mini-card__footer"><a href="#" class="button">Заказать</a></div>
            </div><!-- //.mini-card -->
          </div>
        </li><!-- //.tab -->
      </ul><!-- //.tabs -->
    </div><!-- //.services__tabs -->
    
    <div class="services__cards">
      <ul class="cards">
        <li class="cards__item card">
          <div class="card__header">
            <div class="card__title">Услуги 1С-Программиста</div>
            <span class="cost">от 1000 руб</span>
            <a class="card__readmore" href="#">Подробнее</a>
          </div>
          <div class="card__preview card__preview_one">
            <div class="card__text"><p>Наши программисты выполнят для Вас всю необходимую работу по установке, настройке и обслуживанию программного обеспечения Вашей бухгалтерии</p></div>
            <div class="card__info"><span class="cost cost_outline">от 1000 руб</span></div>
          </div>
          <div class="card__preview card__preview_two">
            <div class="card__text"><p>Наши специалисты имеют только высшую квалификацию в своей области мы имеем огромный опыт работы в любой сфере бизнеса и обеспечим Вам надежное бухгалтерское сопровождение. Данная услуга включает в себя следующее.</p></div>
            <div class="card__info"><a href="#" class="button">Заказать</a></div>
          </div>
          <div class="card__details">
            <p>Составление отчетности во все необходимые инстанции: налоговую,пенсионный (ПФР), Органы статистики и страхования (ФСС)</p>
            <p>Расчет суммы налоговых платежей, которые необходимо уплатить б.джету при использовании той или иной формы налогообложения</p>
            <p>Начисление зарплаты, создание премиального фонда для рабтников предприятия и произведение необходимых отчислений налогов с ФОТ</p>
            <p>Расчет больничных и отпускных, а также подготовка расчета пособий сотрудницам,  оформляющим декрет и отпуск в связи с рождением малыша и последующим уходом за ним </p>
            <p>Организацию введения книги, предназначенной для учета доходов и расхдов предпринимателя, который выбрал упрощенную систему учета (УСН, ПСН)  </p>
            <p>Для предпринимателей ведущих учет по системе ОСНО составление налоговых регистров</p>
            <p>Своевременная сверка по налогам в фондах и ФНС и т.д</p>
          </div><!-- //.card__details -->
        </li><!-- //.card -->
        
        <li class="cards__item card">
          <div class="card__header">
            <div class="card__title">Оптимизация налогообложения</div>
            <span class="cost">от 1000 руб</span>
            <a class="card__readmore" href="#">Подробнее</a>
          </div>
          <div class="card__preview card__preview_one">
            <div class="card__text"><p>Наши программисты выполнят для Вас всю необходимую работу по установке, настройке и обслуживанию программного обеспечения Вашей бухгалтерии</p></div>
            <div class="card__info"><span class="cost cost_outline">от 1000 руб</span></div>
          </div>
          <div class="card__preview card__preview_two">
            <div class="card__text"><p>Наши специалисты имеют только высшую квалификацию в своей области мы имеем огромный опыт работы в любой сфере бизнеса и обеспечим Вам надежное бухгалтерское сопровождение. Данная услуга включает в себя следующее.</p></div>
            <div class="card__info"><a href="#" class="button">Заказать</a></div>
          </div>
          <div class="card__details">
              <p>Составление отчетности во все необходимые инстанции: налоговую,пенсионный (ПФР), Органы статистики и страхования (ФСС)</p>
              <p>Расчет суммы налоговых платежей, которые необходимо уплатить б.джету при использовании той или иной формы налогообложения</p>
              <p>Начисление зарплаты, создание премиального фонда для рабтников предприятия и произведение необходимых отчислений налогов с ФОТ                  </p>
              <p>Расчет больничных и отпускных, а также подготовка расчета пособий сотрудницам,                     оформляющим декрет и отпуск в связи с рождением малыша и последующим уходом за ним                  </p>
              <p>Организацию введения книги, предназначенной для учета доходов и расходов                     предпринимателя, который выбрал упрощенную систему учета (УСН, ПСН)                   </p>
              <p>Для предпринимателей ведущих учет по системе ОСНО составление налоговых регистров                  </p>
              <p>Своевременная сверка по налогам в фондах и ФНС и т.д                  </p>
            </div><!-- //.card__details -->
        </li><!-- //.card -->
        
        <li class="cards__item card">
          <div class="card__header">
            <div class="card__title">Бухгалтерское сопровождение бизнеса</div>
            <span class="cost">от 1000 руб</span>
            <a class="card__readmore" href="#">Подробнее</a>
          </div>
          <div class="card__preview card__preview_one">
            <div class="card__text"><p>Наши программисты выполнят для Вас всю необходимую работу по установке, настройке и обслуживанию программного обеспечения Вашей бухгалтерии</p></div>
            <div class="card__info"><span class="cost cost_outline">от 1000 руб</span></div>
          </div>
          <div class="card__preview card__preview_two">
            <div class="card__text"><p>Наши специалисты имеют только высшую квалификацию в своей области мы имеем огромный опыт работы в любой сфере бизнеса и обеспечим Вам надежное бухгалтерское сопровождение. Данная услуга включает в себя следующее.</p></div>
            <div class="card__info"><a href="#" class="button">Заказать</a></div>
          </div>
          <div class="card__details">
              <p>Составление отчетности во все необходимые инстанции: налоговую,пенсионный (ПФР),                    Органы статистики и страхования (ФСС)</p>
              <p>Расчет суммы налоговых платежей, которые необходимо уплатить б.джету при использовании той или иной формы налогообложения                  </p>
              <p>Начисление зарплаты, создание премиального фонда для рабтников предприятия и произведение необходимых отчислений налогов с ФОТ                  </p>
              <p>Расчет больничных и отпускных, а также подготовка расчета пособий сотрудницам,                     оформляющим декрет и отпуск в связи с рождением малыша и последующим уходом за ним                  </p>
              <p>Организацию введения книги, предназначенной для учета доходов и расходов                    предпринимателя, который выбрал упрощенную систему учета (УСН, ПСН)                </p>
              <p>Для предпринимателей ведущих учет по системе ОСНО составление налоговых регистров </p>
              <p>Своевременная сверка по налогам в фондах и ФНС и т.д    </p>
            </div><!-- //.card__details -->
        </li><!-- //.card -->

        <li class="cards__item card">
          <div class="card__header">
            <div class="card__title">Сдача нулевой отчетности ИП и ООО</div>
            <span class="cost">от 1000 руб</span>
            <a class="card__readmore" href="#">Подробнее</a>
          </div>
          <div class="card__preview card__preview_one">
            <div class="card__text"><p>Наши программисты выполнят для Вас всю необходимую работу по установке, настройке и обслуживанию программного обеспечения Вашей бухгалтерии</p></div>
            <div class="card__info"><span class="cost cost_outline">от 1000 руб</span></div>
          </div>
          <div class="card__preview card__preview_two">
            <div class="card__text"><p>Наши специалисты имеют только высшую квалификацию в своей области мы имеем огромный опыт работы в любой сфере бизнеса и обеспечим Вам надежное бухгалтерское сопровождение. Данная услуга включает в себя следующее.</p></div>
            <div class="card__info"><a href="#" class="button">Заказать</a></div>
          </div>
          <div class="card__details">
              <p>Составление отчетности во все необходимые инстанции: налоговую,пенсионный (ПФР),                    Органы статистики и страхования (ФСС)</p>
              <p>Расчет суммы налоговых платежей, которые необходимо уплатить б.джету при использовании той или иной формы налогообложения                  </p>
              <p>Начисление зарплаты, создание премиального фонда для рабтников предприятия и произведение необходимых отчислений налогов с ФОТ                  </p>
              <p>Расчет больничных и отпускных, а также подготовка расчета пособий сотрудницам,                     оформляющим декрет и отпуск в связи с рождением малыша и последующим уходом за ним                  </p>
              <p>Организацию введения книги, предназначенной для учета доходов и расходов                     предпринимателя, который выбрал упрощенную систему учета (УСН, ПСН)                   </p>
              <p>Для предпринимателей ведущих учет по системе ОСНО составление налоговых регистров                  </p>
              <p>Своевременная сверка по налогам в фондах и ФНС и т.д                  </p>
            </div><!-- //.card__details -->
        </li><!-- //.card -->
      </ul><!-- //.cards -->
    </div><!-- //.services__cards -->

  </div><!-- //.services -->

</div><!-- // .container -->

CSS

              
                * {
  &, &::before, &::after {
    box-sizing: border-box;
  }
}

$gutter-width: 30px;
$bp-mobile: 480px;
$bp-tablet: 768px;

$main-color: #463a31;
$active-color: #1f96c9;

@mixin viewAsAccordion(){
  $bp: $bp-mobile - 1px;
  @media (max-width: $bp) { @content; }
}

@mixin viewAsTabs(){
  @media (min-width: $bp-mobile) { @content; }
}

@mixin viewAsCards(){
  @media (min-width: $bp-tablet) { @content; }
}

body {
  padding: $gutter-width 0;
  background: #fff;
  &::after {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    background: #1d1e22;
    color: #fff;
    padding: 5px 10px;
    content: 'Accordion';
    box-shadow: 0 0 12px rgba(#000, 0.7);
    @media (min-width: $bp-mobile) { content: 'Tabs'; }
    @media (min-width: $bp-tablet) { content: 'Cards'; }
  }
}

%reset-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding-left: ($gutter-width / 2);
  padding-right: ($gutter-width / 2);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: normal;
}

.cost {
  font-size: 1.1rem;
  padding: 10px 25px;
  border-radius: 3px;
  outline: 0;
  display: block;
  
  &_outline {
    border: 1px solid currentColor;
  }
}

.button {
  text-decoration: none;
  text-align: center;
  color: white;
  display: inline-block;
  padding: 8px 25px;
  text-transform: uppercase;
  background-color: #1f96c9;
  border-radius: 5px;
}

.services {
  &__tabs { }
  &__cards { display: none; }
  
  @include viewAsTabs() {
    &__cards { display: block; }
  }

  @include viewAsCards() {
    &__tabs { display: none; }
  }
}

.tabs {
  @extend %reset-list;
  
  @include viewAsAccordion() {
    &__item {
      &:not(:first-child) { border-top: 1px solid lighten($main-color, 10%); }
      &:not(:last-child) { border-bottom: 1px solid darken($main-color, 10%); }
      &.active { border-bottom: transparent; }
    }
  }
  
  @include viewAsTabs() {
    &__item {
      border-top: 1px solid lighten($main-color, 10%);
      border-bottom: 1px solid darken($main-color, 10%);
      border-left: 1px solid lighten($main-color, 10%);
      border-right: 1px solid darken($main-color, 10%);
    }
  }
  
  @include viewAsTabs() {
    display: flex;
    flex-wrap: wrap;
    
    &__item {
      width: 50%;
      flex-shrink: 0;
    }
  }
}

.tab {
  transition: 0.3s ease;
  
  &__title {
    background-color: $main-color;
    color: white;
    position: relative;
  }

  &__link {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 15px;
    padding-right: 25px;
    transition: .3s linear;
    &:hover {
      background-color: $active-color;
    }
  }
  
  &__icon {
    position: absolute;
    right: 10px;
    top: 15px;
    transition: .3s ease-in-out;
    pointer-events: none;
    
    &::before {
      content: "\f067";
      display: block;
      font-family: 'FontAwesome';
      font-style: normal;
      transition: .3s ease-in-out;
    }
  }
  
  &__content {
    @include viewAsAccordion() {
      padding: 1px 0;
    }
  }

  // &.active &__content { display: block; }
  &.active &__title { background-color: $active-color; }
  &.active &__icon::before { content: "\f068"; }
  
  @include viewAsTabs() {
    &__content { display: none; }
    &__icon { display: none; }
    &__title,
    &__link { height: 100%; }
  }
    
}

.mini-card {
  &__header {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid $main-color;
    display: flex;
    justify-content: flex-end;
  }
  
  &__content {
    color: $main-color;
  }
  
  &__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
  }
}

.cards {
  @extend %reset-list;
  
  &__item {
    margin: 15px 0;
  }
}

.card {
  padding: 15px 0;
  color: $main-color;
  
  &__header {
    padding: 10px 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    border-bottom: 1px solid $main-color;
    .cost { font-weight: bold; white-space: nowrap; }
  }

  &__title {
    font-size: 1.8rem;
  }
  
  &__readmore { display: none; }
  
  &__preview {
    display: flex;
    align-items: center;
    
    &_one { display: none; }
  }
  
  &__text {
    font-size: 1.1rem;
    padding-right: 20px;
  }
  
  &__info {
    flexs-shrink: 0;
    white-space: nowrap;
  }

  @include viewAsCards() {
    background-color: #483b32;
    color: white;
    border-radius: 5px;
    padding-left: 50px;
    padding-right: 50px;
  
    &__header {
      border-bottom-color: #fff;
      .cost { display: none; }
    }

    &__readmore {
      display: block;
      color: #ccc;
      text-align: right;
      font-size: 14px;
    }

    &__preview {
      &_one { display: flex; }
      &_two { display: none; }
    }

    &__details {
      display: none;
    }
  }
}

JS

              
                console.clear();


//== Константы
//== ==============================

const DURATION_FADE  = 1000;
const DURATION_SLIDE = 500;

const VIEW_ACCORDION = 0;
const VIEW_TABS      = 1;
const VIEW_CARDS     = 2;

const BP1 = 480;
const BP2 = 768;
const MEDIA_ACCORDION = `(max-width: ${BP1 - 1}px)`;
const MEDIA_TABS      = `(min-width: ${BP1}px) and (max-width: ${BP2 - 1}px)`;
const MEDIA_CARDS     = `(min-width: ${BP2}px)`;
const MQ_LIST         = [MEDIA_ACCORDION, MEDIA_TABS, MEDIA_CARDS];


//== Состояние компоненты
//== ================================

function State(params) {
  let _index = -1;
  let _view  = -1;
  
  const state = {
    get index() {
      return _index;
    },

    set index(val) {
      if (_index !== val) {
        _index = val;
        console.log('OnChangeIndex:', state);

        if ( typeof params === 'object'
          && params.hasOwnProperty('onChangeIndex')
          && typeof params.onChangeIndex === 'function'
        ) {
          params.onChangeIndex(state);
        }
      }
    },

    get view() {
      return _view;
    },

    set view(val) {
      if (_view !== val) {
        _view = val;
        console.log('OnChangeView:', state);

        if ( typeof params === 'object'
          && params.hasOwnProperty('onChangeView')
          && typeof params.onChangeView === 'function'
        ) {
          params.onChangeView(state);
        }
      }
    },
    
    changeView(mq, view){
      if (mq.matches) this.view = view;
    },
  };
  
  return state;
}


//== Переключение в режиме аккордиона
//== ================================

function SwitchAccordion($items, index) {
  $items.each((i, el) => {
    el.classList.toggle('active', index === i);
    const $content = $(el).find('.tab__content');
    if (index === i) {
      $content.slideDown(DURATION_SLIDE);
    } else {
      $content.slideUp(DURATION_SLIDE);
    }
  });
}


//== Переключение в режиме вкладок
//== ================================

function SwitchTabs($tabs, $cards, index) {
  $tabs.each((i, el) => {
    el.classList.toggle('active', index === i);
  });
  $cards.find('.card__details').show();
  $cards.each((i, el) => {
    if (index === i) {
      $(el).fadeIn(DURATION_FADE);
    } else {
      $(el).hide();
    }
  });
}


//== Переключение в режим карточек
//== ================================

function SwitchToCards($cards) {
  $cards.show();
  $cards.find('.card__details').hide();
}


//== Компонента
//== ================================

$('.services').each(el => {
  
  const $tabs     = $('.tab', el);
  const $tabTitle = $('.tab__title', el);
  const $cards    = $('.card', el);
  const $readmore = $('.card__readmore', el);
  
  // Расстановить индексы для упрощения
  $tabTitle.each((index, el) => { el.dataset.index = index; });

  // Коллбэк-фукция, реагирующая на смену состояния
  function onChangeState(_state){
    if (_state.view === VIEW_ACCORDION) SwitchAccordion($tabs, _state.index);
    if (_state.view === VIEW_TABS)      SwitchTabs($tabs, $cards, _state.index);
    if (_state.view === VIEW_CARDS)     SwitchToCards($cards);
  }

  // Создать состояние для компонента
  let state = new State({
    onChangeIndex: onChangeState,
    onChangeView: onChangeState,
  });

  // Отслеживать медиазапросы
  MQ_LIST.forEach((item, index) => {
    const mq = matchMedia(item);
    state.changeView(mq, index);
    mq.addListener(_mq => state.changeView(_mq, index));
  });

  // Установить начальный индекс открытой вкладки
  state.index = 0;

  // Отслеживать клики по вкладкам
  $tabTitle.on('click', ev => {
    ev.preventDefault();
    state.index = (+ev.currentTarget.dataset.index);
  });

  // Отслеживать клики ссылке «Подробнее»
  $readmore.on('click', ev => {
    ev.preventDefault();
    $(ev.target).closest('.card').find('.card__details').slideToggle(DURATION_SLIDE);
  });
  
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions