CodePen Embed - Accordion/Tabs/Cards

<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 -->

* {
  &, &::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;
    }
  }
}

View Compiled

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);
  });
  
});

View Compiled

This Pen is owned by Sergey on CodePen.

See more by @delphinpro on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js