Cacher is the code snippet organizer for pro developers

/*tabs*/
.tabTitels {
    z-index:10;
    a {
        color:#8e8e8e;
        font-size:14px;
        font-weight:bold;
        background-color:#e3e3e3;
        height:40px;
        line-height:40px;
        padding:0 20px;
        display:inline-block;
        margin-right:5px;
        text-decoration:none;
        border:none;
        bottom:-2px;
        position:relative;
        .border-radiuses(3px, 0px, 0px, 3px);
        .inner-shadow(0, -2px, 2px, 0.1);
        &.active {
            color:#404040;
            background-color:#FFF;
            height:44px;
            line-height:44px;
            bottom:-1px;
            position:relative;
            border:1px solid #cacaca;
            border-bottom:none;
            .inner-shadow(0, 0px, 0px, 0);
        }
    }
}

.tabContent {
    z-index:9;
    .tContent {
        border-top:1px solid #d4d4d4;
        border-bottom:1px solid #d4d4d4;
        padding:20px 0;
        margin-bottom:20px;
        &.active {
            display: block;
        }
    }
}
/*tabs end*/

$(window).bind("load resize orientationchange", function () {
  ww = document.body.clientWidth;
  mobileSwitch();
});

ww = document.body.clientWidth;

function mobileSwitch(){
  if (ww <= 768) {
        $('.tabz').hide();
        $('.tabs').show();    
  }else{
        $('.tabz').show();
        $('.tabs').hide();    
  }
}

$(document).ready(function () {
    //tabs
    //create
    $('.tabs').each(function () {
        var vT = $(this);
        var vContent = vT.html();
        vT.before('<span class="tabz"><div class="tabTitels"></div><div class="tabContent"></div></span>');
        var vArr = vContent.split('<h3>');
        for (var i = 0; i < vArr.length; i++) {
            if (i > 0) {
                if (i == 1) { vState = ' active' } else { vState = '' }
                var vArr2 = vArr[i].split('</h3>');
                if (vArr2[0]) {
                    $('.tabTitels').append('<a href="#" rel="tab' + i + '" class="' + vState + '">' + vArr2[0] + '</a>');
                    $('.tabContent').append('<div class="content' + i + ' tContent' + vState + '"></div>');
                }
                if (vArr2[1]) {
                    $('.tabContent').find('.content' + i).html(vArr2[1]);
                }
            }
        }
        $('.tabContent').find('.tContent:not(.active)').hide();
        //function
        $('.tabTitels').find('a').click(function () {
            console.log('test');
            $('.tabTitels').find('a.active').removeClass('active');
            var vTa = $(this);
            vTa.addClass('active');
            var vNum = vTa.attr('rel').replace('tab', '');
            $('.tabContent').find('.tContent').slideUp().removeClass('active');
            $('.tabContent').find('.content' + vNum).slideDown().addClass('active');
            
            return false;
            $('.tabContent').blur();
        }).bind('mouseleave', function(){
            $(this).blur();
        });
        vT.hide();
        
    });
});

<div class="tabs">
  <h3>title</h3>
  <p>text</p>
  <h3>Title2</h3>
  <p>Text2</p>
  <h3>Title3</h3>
  <p></p>
</div>