accordion

.sxn_ ul li .accordion_title {}
.sxn_ ul li .accordion_title.acrdn_open {}
.sxn_ ul li .accordion_content {
    display: none;
}
.sxn_ ul li .accordion_title.acrdn_open .accordion_content {}

function close_accordion_section() {
  $('.sxn_ .accordion_title').removeClass('acrdn_open');
  $('.sxn_ .accordion_content').slideUp(300).removeClass('acrdn_open');
}

$('.accordion_title').click(function(e) {
  //  grab current anchor value
  var current_attr_value = $(this).attr('data-value');

  if ($(e.target).is('.acrdn_open')) {
    close_accordion_section();
  } else {
    close_accordion_section();
    //  add active class to section title
    $(this).addClass('acrdn_open');
    // Open up the hidden content panel
    $(this).next().slideDown(300).addClass('acrdn_open');
    //$('.sxn_ .accordion_content_' + current_attr_value).slideDown(300).addClass('acrdn_open');
  }
  e.preventDefault();
});

<ul class='accordion'>
  <li>
    <a class='accordion_title' data-value='1' href="#"></a>
    <div class='accordion_content accordion_content_1'>
      <p>Mus dolupti idebite cumenia sperspercia pelia</p>
      <a href="#"></a>
    </div>
  </li>
  <li>
    <a class='accordion_title' data-value='2' href="#"></a>
    <div class='accordion_content accordion_content_2'>
      <p></p>
      <a href="#"></a>
    </div>
  </li>
  <li>
    <a class='accordion_title' data-value='3' href="#"></a>
    <div class='accordion_content accordion_content_3'>
      <p></p>
      <a href="#"></a>
    </div>
  </li>
</ul>

simple accordion

js

$(document).ready(function($) {
  $('.accordion_list').find('.accordion_toggle').click(function(){
    //  expand or collapse this panel
    $(this).next().slideToggle('fast');
    //  hide the other panels
    $(".accordion_content").not($(this).next()).slideUp('fast');
  });
  $('.accordion_list .accordion_toggle').click(function(e){
    e.preventDefault();
  });
});

//  expanded
$(document).ready(function($) {
  $('.accordion_list').find('.accordion_toggle').click(function(){
    //Expand or collapse this panel
    $(this).next().slideToggle('fast');

    if ( $(this).hasClass('acrdn_open') ) {
      $(this).removeClass('acrdn_open');
    } else {
      $('.accordion_toggle').removeClass('acrdn_open');
      $(this).addClass('acrdn_open');
    }
    //Hide the other panels
    $('.accordion_content').not($(this).next()).slideUp('fast');
  });

  $('.accordion_list .accordion_toggle').click(function(e){
    e.preventDefault();
  });
});

css

.sxn_ .accordion_toggle { 
  cursor: pointer; 
}
.sxn_ .accordion_content { 
  display: none; 
}
.sxn_ .accordion_content.acrdn_open { 
  display: block; 
}

html

<ul class='accordion_list'>
  <li>
    <h4 class='accordion_toggle'>Accordion 1</h4>
    <div class='accordion_content acrdn_open'>
      <p>Cras malesuada ultrices augue molestie risus.</p>
    </div>
  </li>
  <li>
    <h4 class='accordion_toggle'>Accordion 2</h4>
    <div class='accordion_content'>
      <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
    </div>
  </li>
  <li>
    <h4 class='accordion_toggle'>Accordion 3</h4>
    <div class='accordion_content'>
      <p>Vivamus facilisisnibh scelerisque laoreet.</p>
    </div>
  </li>
</ul>

accordion with side element on desktop

css

/*  < sxn_ >  */
.sxn_ {
  color: #fff;
  font-size: 0;
}
.sxn_ .sxn_wrap {}
.sxn_ .accordion_list {
  position: relative;
  padding: 0;
  text-align: left;
}
.sxn_ .accordion_toggle {
  position: relative;
  box-sizing: border-box;
  display: block;
  margin: 0 0 2px;
  padding: 17px 20px 17px;
  color: #fff;
  font: 600 16px/1 'Lato', sans-serif;
  background: rgb( 22, 62, 112 );
  transition: all 250ms ease;
}
.sxn_ .acrdn_open .accordion_toggle,
.sxn_ .accordion_toggle:hover {
  background-color: #51b0e7;
}
.sxn_ .accordion_toggle .span {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: perspective(1px) translateY(-50%);
  display: block;
}
.sxn_ .accordion_content {
  box-sizing: border-box;
  display: none;
  margin: 0 0 2px;
  padding: 20px;
  background: rgb( 22, 62, 112 );
}
.sxn_ .accordion_content:after {
  content:'';
  display: block;
  clear: both;
}
.sxn_ .acrdn_open .accordion_content {
  display: block;
}
.sxn_ .accordion_content p {
  font: 14px/1.25 'Open Sans', sans-serif;
}
@media screen and (min-width: 800px) {
  .sxn_ .accordion_toggle {
    box-sizing: border-box;
    width: 240px;
  }
  .sxn_ .accordion_list li:last-of-type .accordion_toggle {
    margin: 0;
  }
  .sxn_ .accordion_content {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: calc( 100% - 242px );
  }
}
/*  </ sxn_ >  */

js

//  < sxn_ >
//  init
$(".sxn_ .item_1").addClass( 'acrdn_open' );

$('.accordion_list').find('.accordion_toggle').click(function(){
  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  if ( $(this).closest("li").hasClass('acrdn_open') ) {
    $(this).closest("li").removeClass('acrdn_open');
  } else {
    $('.accordion_list li').removeClass('acrdn_open');
    $(this).closest("li").addClass('acrdn_open');
  }
  //Hide the other panels
  $('.accordion_content').not($(this).next()).slideUp('fast');
});

$('.accordion_list .accordion_toggle').click(function(e){
  e.preventDefault();
});
//  </ sxn_ >

html

<div class='sxn_bucket sxn_'><div class='sxn_wrap'>

  <ul class='accordion_list'>
    <li class='item_1'>
      <a class='accordion_toggle' href="#"><span>Title 1</span></a>
      <div class='accordion_content'>
        <p>
          1 content
        </p>
      </div>
    </li>
    <li class='item_2'>
      <a class='accordion_toggle' href="#"><span>Title 2</span></a>
      <div class='accordion_content'>
        <p>
          2 content
        </p>
      </div>
    </li>
    <li class='item_3'>
      <a class='accordion_toggle' href="#"><span>Title 3</span></a>
      <div class='accordion_content'>
        <p>
          3 content
        </p>
      </div>
    </li>
  </ul>

</div></div>