Показываем и скрываем неопределенное количество элементов страницы на javascript (jquery) - переключение табов

gistfile1.txt

@extends('fx.index')
@section('content')
<link rel="stylesheet" type="text/css" href="{{ url('fx/css/obsidian.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('fx/css/examples.css') }}">

<div class="row">
	<div class="col-md-12">
		<h2>code examples</h2>
		<h4 id="php_title" data-val="php">PHP</h4>
		<h4 id="js_title" data-val="js">JavaScript</h4>
		<h4 id="sass_title" data-val="sass">Sass</h4>
		<h4 id="jade_title" data-val="jade">Jade</h4>
	</div>
	<div class="col-md-12">
		<pre id="php" class="hider">
			<code class="language-php">
@include('fx.php')
			</code>
		</pre>
	</div>
	<div class="col-md-12">
		<pre id="js" class="hider">
			<code class="language-js">
@include('fx.js')
			</code>
		</pre>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<pre class="hider" id="sass">
			<code class="language-css">

@include('fx.sass')

@include('fx.sass1')

@include('fx.sass2')
			</code>
		</pre>
	</div>
	<div class="col-md-12">
		<pre id="jade" class="hider">
			<code class="language-php">
@include('fx.jade')
			</code>
		</pre>
	</div>
</div>

<script src="{{ url('fx/js/prism.js') }}"></script>
@endsection

Показываем (скрываем) элементы страницы js

$(function() {
	$('h4').click( function (event) {
		
		var id = $(this).attr('data-val');
		$('#'+id).toggleClass('show-it');

		$('pre').each(function (arg) {
			if ( $(this).hasClass('show-it') && $(this).attr('id') != id ) {
				$(this).removeClass('show-it');
			}
		})
	
	});

	

});