CODEWITHSUNDEEP
jqueryhtmlslider
elevatrons
elevatrons

Reputation: 19

Slide next div on button click

I'm trying to slide a div over on Button click.

I have it working by clicking on the div itself.

I've tried changing .box to button and $(this) to $('.box') but then all the divs seem to slide over rather than just the next div.

I'm new to jquery/javascript and have tried searching for a bunch of different solutions but I'm at a loss and I'm sure it's something very simple.

$('.box').click(function() {
	$(this).animate({
		left: '-50%'
	}, 500, function() {
		$(this).css('left', '150%');
		$(this).appendTo('#slide-box-container');
	});

	$(this).next().animate({
		left: '50%'
	}, 500);
});
#slide-box-container {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 400px;
	overflow: hidden;  
}

.box {
	position: absolute;
	width: 50%;
	height: 300px;
	line-height: 300px;
	font-size: 50px;
	text-align: center;
	border: 2px solid black;
	left: 50%;
	top: 100px;
	margin-left: -25%;
}

#box1 {
	background-color:#333;
	left: 50%;
}

#box2 {
	background-color:#333;
	left: 150%;
}

#box3 {
	background-color:#333;
	left: 150%;
}

#box4 {
	background-color:#333;
	left: 150%;
}

#box5 {
	background-color:#333;
	left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide-box-container">
	<div id="box1" class="box">Div #1</div>
	<div id="box2" class="box">Div #2</div>
	<div id="box3" class="box">Div #3</div>
	<div id="box4" class="box">Div #4</div>
	<div id="box5" class="box">Div #5</div>
</div>

<button class="clickMe">BUTTON</button>

Upvotes: 1

Views: 1144

Answers (1)

user9407009
user9407009

Reputation:

I created this for u. It will make it work with ur current setup.

<script>
var boxvar = 1;
$(document).ready(function(){
    $('.clickMe').click(function() {
    $('#box' + boxvar).animate({
        left: '-50%'
    }, 500, function() {
        $('#box' + boxvar).css('left', '150%');
        $('#box' + boxvar).appendTo('#slide-box-container');
        if(boxvar != 5){
        boxvar += 1;
        }else{
        boxvar = 1;
        }
    });

    $('#box' + boxvar).next().animate({
        left: '50%'
    }, 500);
});
});
</script>

Upvotes: 1

Related Questions