Переключатель контента на JavaScript

jQuery(function($) { 
    var $links, $switcher; 
    $links = $('[data-show]'); 
    $switcher = $('.switch-js'); 
    $switcher.children().not(':first').hide(); 
    $links.click(function() { 
        var id; 
        id = '[data-switch="' + $(this).data('show') + '"]'; 
        $switcher.children(id).show(); 
        $switcher.children().not(id).hide(); 
    }); 
}); 
jQuery(function($) { 
    var $links2, $switcher2; 
    $links2 = $('[data-show]'); 
    $switcher2 = $('.switch-js-2'); 
    $switcher2.children().not(':first').hide(); 
    $links2.click(function() { 
        var id; 
        id = '[data-switch="' + $(this).data('show') + '"]'; 
        $switcher2.children(id).show(); 
        $switcher2.children().not(id).hide(); 
    }); 
}); 
jQuery(function($) { 
    var $links3, $switcher3; 
    $links3 = $('[data-show]'); 
    $switcher3 = $('.switch-js-3'); 
    $switcher3.children().not(':first').hide(); 
    $links3.click(function() { 
        var id; 
        id = '[data-switch="' + $(this).data('show') + '"]'; 
        $switcher3.children(id).show(); 
        $switcher3.children().not(id).hide(); 
    }); 
}); 
 
$(document).ready(function() { 
    $('.switcher li').on('click', changeClass); 
    $('.switcher-two li').on('click', changeClass2); 
    $('.switcher-three li').on('click', changeClass3); 
}); 
function changeClass() { 
    $('.switcher li').removeClass('selected'); 
    $(this).addClass('selected'); 
} 
function changeClass2() { 
    $('.switcher-two li').removeClass('selected'); 
    $(this).addClass('selected'); 
} 
function changeClass3() { 
    $('.switcher-three li').removeClass('selected'); 
    $(this).addClass('selected'); 
}

.decorated { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    margin-bottom: 1.5em; 
    display: inline-block; 
} 
.decorated__type2 { 
    background: #fbf9f7; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 
.decorated__type2 .decorated-inner { 
    padding: 0; 
} 
.decorated .decorated-inner { 
    padding: .7em 1.2em; 
    position: relative; 
} 
.cleared { 
    zoom: 1; 
} 
.variants { 
    float: left; 
    margin-top: 0; 
    padding: 1em 1em .7em; 
} 
.variants .switcher, 
.variants .switcher-two, 
.variants .switcher-three { 
    padding: .3em 0 1em; 
    position: relative; 
    white-space: nowrap; 
} 
ul { 
    list-style-type: none; 
} 
.variants .switcher .selected, 
.variants .switcher-two .selected, 
.variants .switcher-three .selected { 
    background: #eaeaea; 
} 
.variants .switcher li, 
.variants .switcher-two li, 
.variants .switcher-three li { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    display: inline-block; 
    padding: 6px; 
} 
.variants .opening_view { 
    position: relative; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="decorated decorated__type2"> 
<div class="decorated-inner cleared"> 
 
<div class="variants"> 
<h3>Title 1</h3> 
<ul class="switcher"> 
<li class="for_opening_view selected" data-show="one">1</li> 
<li class="for_opening_view" data-show="two">2</li> 
</ul> 
<div class="switch-js"> 
<div class="opening_view" data-switch="one">Content for 'One' data-show</div> 
<div class="opening_view" data-switch="two">Content for 'Two' data-show</div> 
</div> 
</div> 
 
<div class="variants"> 
<h3>Title 2</h3> 
<ul class="switcher-two"> 
<li class="for_opening_view selected" data-show="three">1</li> 
<li class="for_opening_view" data-show="four">2</li> 
<li class="for_opening_view" data-show="five">3</li> 
</ul> 
<div class="switch-js-2"> 
<div class="opening_view" data-switch="three">Content for 'Three' data-show</div> 
<div class="opening_view" data-switch="four">Content for 'Four' data-show</div> 
<div class="opening_view" data-switch="five">Content for 'Five' data-show</div> 
</div> 
</div> 
 
<div class="variants"> 
<h3>Title 3</h3> 
<ul class="switcher-three"> 
<li class="for_opening_view selected" data-show="six">1</li> 
<li class="for_opening_view" data-show="seven">2</li> 
<li class="for_opening_view" data-show="eight">3</li> 
<li class="for_opening_view" data-show="nine">4</li> 
</ul> 
<div class="switch-js-3"> 
<div class="opening_view" data-switch="six">Content for 'Six' data-show</div> 
<div class="opening_view" data-switch="seven">Content for 'Seven' data-show</div> 
<div class="opening_view" data-switch="eight">Content for 'Eight' data-show</div> 
<div class="opening_view" data-switch="nine">Content for 'Nine' data-show</div> 
</div> 
</div> 
 
</div> 
</div>