CMS Developers

<div class="tabs-main">
  <div class="wrapper">
    <ul class="tabs">
      {% for item in module.tabs_accordions %}
      <li {% if loop.index == 1 %}class="active"{% endif %} rel="tab{{loop.index}}">{{ item.tab_title }}</li>
      {% endfor %}    
    </ul>
    <div class="tab_container">  
      {% for item in module.tabs_accordions %}
        <h3 class="acc_active tab_accordion_heading" rel="tab{{loop.index}}">{{ item.tab_title }}</h3>
        <div id="tab{{loop.index}}" class="tab_content">
          <h2>{{ item.tab_title }}</h2>
          <p>{{ item.tab_content }}</p>
        </div>
      {% endfor %}  
    </div>
  </div>
</div>
          
        

          
            .wrapper{ max-width: 1024px; margin: 0px auto; float: none; }
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #e64a19;
	width: 100%;
}

ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 0px 21px;
	height: 31px;
	line-height: 31px;
	border-top: 1px solid #e64a19;
	border-left: 1px solid #e64a19;
	border-bottom: 1px solid #e64a19;
	background-color: rgba(218, 106, 26, 0.85);
	color: #ccc;
	overflow: hidden;
	position: relative;
}

.tab_last { border-right: 1px solid #e64a19; }

ul.tabs li:hover {
	background-color: #ccc;
	color: #e64a19;
}

ul.tabs li.active {
	background-color: #fff;
	color: #e64a19;
	border-bottom: 1px solid #fff;
	display: block;
}

.tab_container {
	border: 1px solid #e64a19;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	overflow: auto;
}

.tab_content {
	padding: 20px;
	display: none;
}

.tab_accordion_heading { display: none; }

@media screen and (max-width: 480px) {
	.tabs {
		display: none;
	}
	.tab_accordion_heading {
		background-color: #ccc;
		color: #fff;
		border-top: 1px solid #e64a19;
		margin: 0;
		padding: 5px 20px;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.acc_active {
		background-color: #666;
		color: #fff;
	}
}
          
        

          
            $(document).ready(function(){

  $(".tab_content").hide();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function() {

    $(".tab_content").hide();
    var active_tab = $(this).attr("rel"); 
    $("#"+active_tab).fadeIn();		

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $(".tab_accordion_heading").removeClass("acc_active");
    $(".tab_accordion_heading[rel^='"+active_tab+"']").addClass("acc_active");

  });

  $(".tab_accordion_heading").click(function() {      
    $(".tab_content").hide();
    var acc_active_tab = $(this).attr("rel"); 
    $("#"+acc_active_tab).fadeIn();

    $(".tab_accordion_heading").removeClass("acc_active");
    $(this).addClass("acc_active");

    $("ul.tabs li").removeClass("active");
    $("ul.tabs li[rel^='"+acc_active_tab+"']").addClass("active");
  });

  $('ul.tabs li').last().addClass("tab_last");
  
});