goranb/slides.html

## slides.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Slider</title>
<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"
></script>
<style>
.slides {
    position: relative;
    width: 300px;
    height: 150px;
    overflow: hidden;
}

.slide {
    display: block;
    position: absolute;
    border: 1px solid black;
    box-sizing: border-box;
    background-color: rgba(255,0,0,0.1);
    width: 300px;
    height: 150px;
    top: -150px;
}

.active {
    top: 0px;
    transition-duration: 0.5s;
}

.pushed {
    top: 150px;
}

</style>
<script>
$(function(){
    $('.tab').on('click', function(){
        var $current = $('#' + $(this).data('slide-id'));

        $('.slide').each(function(i, e) {

            var $element = $(e);

            if ($element.is($current)) {
                // reset if pushed
                if ($element.hasClass('pushed')) {
                    $element.removeClass('active')
                    $element.removeClass('pushed');
                    $element.focus(); // reflow, or use any from https://gist.github.com/shobhitsharma/8edcbdd0ad0ef3eaac3118e638e1b124
                }
                if (! $element.hasClass('active')) {
                    $element.addClass('active');
                }
            } else if ($element.hasClass('active') && ! $element.hasClass('pushed')) {
                $element.addClass('pushed');
            }
        });
    })
});
</script>
</head>
<body>

<button class="tab" data-slide-id="slide-1">Slide 1</button>
<button class="tab" data-slide-id="slide-2">Slide 2</button>
<button class="tab" data-slide-id="slide-3">Slide 3</button>
<button class="tab" data-slide-id="slide-4">Slide 4</button>
<button class="tab" data-slide-id="slide-5">Slide 5</button>
<div class="slides">
    <div id="slide-1" class="slide">Slide 1</div>
    <div id="slide-2" class="slide">Slide 2</div>
    <div id="slide-3" class="slide">Slide 3</div>
    <div id="slide-4" class="slide">Slide 4</div>
    <div id="slide-5" class="slide">Slide 5</div>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Slider</title>
	<script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"
	></script>
	<style>
	.slides {
	position: relative;
	width: 300px;
	height: 150px;
	overflow: hidden;
	}

	.slide {
	display: block;
	position: absolute;
	border: 1px solid black;
	box-sizing: border-box;
	background-color: rgba(255,0,0,0.1);
	width: 300px;
	height: 150px;
	top: -150px;
	}

	.active {
	top: 0px;
	transition-duration: 0.5s;
	}

	.pushed {
	top: 150px;
	}

	</style>
	<script>
	$(function(){
	$('.tab').on('click', function(){
	var $current = $('#' + $(this).data('slide-id'));

	$('.slide').each(function(i, e) {

	var $element = $(e);

	if ($element.is($current)) {
	// reset if pushed
	if ($element.hasClass('pushed')) {
	$element.removeClass('active')
	$element.removeClass('pushed');
	$element.focus(); // reflow, or use any from https://gist.github.com/shobhitsharma/8edcbdd0ad0ef3eaac3118e638e1b124
	}
	if (! $element.hasClass('active')) {
	$element.addClass('active');
	}
	} else if ($element.hasClass('active') && ! $element.hasClass('pushed')) {
	$element.addClass('pushed');
	}
	});
	})
	});
	</script>
	</head>
	<body>

	<button class="tab" data-slide-id="slide-1">Slide 1</button>
	<button class="tab" data-slide-id="slide-2">Slide 2</button>
	<button class="tab" data-slide-id="slide-3">Slide 3</button>
	<button class="tab" data-slide-id="slide-4">Slide 4</button>
	<button class="tab" data-slide-id="slide-5">Slide 5</button>
	<div class="slides">
	<div id="slide-1" class="slide">Slide 1</div>
	<div id="slide-2" class="slide">Slide 2</div>
	<div id="slide-3" class="slide">Slide 3</div>
	<div id="slide-4" class="slide">Slide 4</div>
	<div id="slide-5" class="slide">Slide 5</div>
	</div>

	</body>
	</html>