Slide content animation

Question

This is my content and different content has different behaviour such as when the 1st column click column 2, column 3, column 4 move to right and if 4th column click it push all the content to left.

Jquery

$("#toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '50%' });
    $(".WSUA__column__three").animate({ right: '-25%' });
    $(".WSUA__column__four").animate({ right: '-50%' });
    $("span.hidden-menu.toogle-1").show();
    $("div.hidden-cross.toogle-1").show();
    $("#toogle-1").hide();
    $("#toogle-2").addClass("unclickable");
    $("#toogle-3").addClass("unclickable");
    $("#toogle-4").addClass("unclickable");
});
$("div.hidden-cross.toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '25%' });
    $(".WSUA__column__three").animate({ right: '0%' });
    $(".WSUA__column__four").animate({ right: '-25%' });
    $(".hidden-menu").hide();
    $("div.hidden-cross.toogle-1").hide();
    $("#toogle-1").show();
    $("#toogle-2").removeClass("unclickable");
    $("#toogle-3").removeClass("unclickable");
    $("#toogle-4").removeClass("unclickable");
});

Is there any way to create a function without declare toogle-1, toogle-2, toogle-3, and toogle-4? Let's say i want to create another content like this and i have to duplicate all the jquery and change all the toogle.

Answer 1

Is this what you mean?

		jQuery(document).ready(function() {
			jQuery('.container > div:nth-child(odd)').click(function() {
				jQuery(this).nextAll().toggleClass('siblings-move-odd');
				jQuery(this).toggleClass('active-odd');
			});
			jQuery('.container > div:nth-child(even)').click(function() {
				jQuery(this).prevAll().toggleClass('siblings-move-even');
				jQuery(this).toggleClass('active-even');
			});
		});

			.container {
			}
			.container > div {
				display: inline-block;
				width: 25%;
				float: left;
				position: relative;
				transition: left 1s ease-in;
				left: 0;
			}
			.container > div.siblings-move-odd {
				left: 25%;
				transition: left 1s ease-in;
			}
			.container > div.siblings-move-even {
				left: -25%;
				transition: left 1s ease-in;
			}
			.container div .right {
				background: grey;
				height: 18px;
				width: 0%;
				display: inline-block;	
				position: absolute;
				transition: width 1s ease-in;
			}
			.container div:nth-child(odd) .right {
				left: 100%;
			}
			.container div:nth-child(even) .right {
				right: 100%;
			}
			.container > div.active-odd .right {
				width: 100%;
				transition: width 1s ease-in;
			}
			.container > div.active-even .right {
				width: 100%;
				transition: width 1s ease-in;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
			<div style="background-color: red;">
				1
				<div class="right">
				</div>
			</div>
			<div style="background-color: blue;">
				2
				<div class="right">
				</div>
			</div>
			<div style="background-color: green;">
				3
				<div class="right">
				</div>
			</div>
			<div style="background-color: purple;">
				4
				<div class="right">
				</div>
			</div>
		</div>