We Keep Coding

How can I create previous and next buttons for a multiple div form?

I have a form that has several "pages" with each "page" being a container holding some content.
I would like to have previous and next buttons following these rules:
Clicking the next button should progress forward through the form's pages until the last page and stop
Clicking the previous button should progress backwards through the form until the first page and stop.
Here is the example of similar functionality except it does't follow the rules above because hitting next on the last page cycles back to the first and vice versa.
Here is what I have tried so far:
JS
$('.box button').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
var t=$(this);
t.parent().animate({
left: '-50%'
}, 500);
if (t.parent().next().size() > 0) {
t.parent().next().animate({
left: '50%'
}, 500);
} else {
t.parent().prevAll().last().animate({
left: '50%'
}, 500);
}
});

The below is one method that will achieve this (note that this could be simplified a good bit but doing so here would make it more difficult to understand for new programers):
$('.previous').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=0) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur-1).addClass('active');
}
});
$('.next').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=$('.form-panel').length-1) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur+1).addClass('active');
}
});
.form-panel:not(.active) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-panel active">Panel one content here</div>
<div class="form-panel">Panel two content here</div>
<div class="form-panel">Panel three content here</div>
<div class="form-panel">Panel four content here</div>
<div class="form-panel">Panel five content here</div>
<div class="form-panel">Panel six content here</div>
<br>
<button class="previous">Previous</button>
<button class="next">Next</button>
If you require animations, this method can easily be modified to include them.

How to toggle visibility of several divs separately

I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}

The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword

Slide multiple divs to side as one

I am trying to make navigation bar displayed in a line. For the sake of question I have created this fiddle. I would like to hide the red divs as one div to one side by clicking on the black div. So I put all the red divs into one <div class="box"></div> and tried to slide the box div. But it messes up. Instead of going to a side like a train it expands to multiple rows and then hides. Also I could just slide the divs of class slide but then it looks like this. Which is not what I want, because it hides each one on its own.

This might work for you
FIDDLE
js:
state = true;
$('.clickMe').click(function () {
if (state) {
$("#inner").animate({
left: '-100px'
}, "slow");
state = false;
} else {
$("#inner").animate({
left: '0px'
}, "slow");
state = true;
}
});
html:
<div class="clickMe"></div>
<div id="outer">
<div id="inner">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

Many toggle-slide elements in one page

I use this script multiple times to hide some text:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
I want to make it impossible to toggle two hidden divs at once.
Example:
Click on one button (#button1) = the hidden div (#div1) associated to that button shows.
Click another button (#button2) = The div (#div2) associated to that button shows and at the same time #div1 closes (slide to close).
Click another button (#button3) = The div (#div3) associated to that button shows and at the same time #div2 closes (slide to close).

Add a class .button to all of the buttons and .div to all divs. Then it's just a matter of:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
http://jsfiddle.net/6Lhxm/

Could also hide all the divs on click and then show only the associated one:
javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
html:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>
http://jsfiddle.net/x7Ehq/

accordion if/else logic

I'm guessing my if/else logic is skewed. Basically I have an accordion structure where, on page load, the first accordion pane is half-revealed to a height of 150px. Then when the user clicks on the accordion header it fully opens to a height of 320px. On the next click it should close and act normally like the other accordion elements with a standard hide/show. It currently works ok but its not smooth and the accordion pane closes before it fully reveals.
Here's the html:
<div class="accordion">
<h3 class="acc-header glanceH">At a glance</h3>
<div class="acc-content glanceC slider" >
<div class="hero-video">
</div>
</div>
<h3 class="acc-header">What we do</h3>
<div class="acc-content" >
<div class="hero-video what-we-do">
</div>
</div>
<h3 class="acc-header">How we do it</h3>
<div class="acc-content how" >
</div>
<h3 class="acc-header">Where we reach</h3>
<div class="acc-content where" >
</div>
<h3 class="acc-header">How</h3>
<div class="acc-content" >
</div>
</div>
Here's the jQuery:
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.acc-header').click(function(e) {
e.preventDefault();
$(this).toggleClass('acc-active');
$(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200);
$(this).siblings().removeClass('acc-active');
});
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider').css('height','150px');
$('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');
//if its already been opened, close it, else open it to 320px
$('.glanceH').click(function() {
if(!$(this).hasClass('acc-active')) {
$(this).next().siblings('.acc-content').slideUp(2000);
$(this).siblings().removeClass('acc-active');
}
else if($('.slider').hasClass('itsopen')){
$('.slider').animate({ height: 320}, 'slow');
}
});

Update: Oops, it would help if I read the question - Here is a demo :P
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
var first = $('.slider');
// open peek if clicked, otherwise hide it
if (first.is('.itsopen')) {
if ($(this).next().is('.acc-active')) {
// open peek to full height
first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
return;
} else {
// close first because a different header was clicked
first.removeClass('itsopen acc-active').slideUp('slow');
}
}
// remove active class from all content
$('.acc-content').removeClass('acc-active');
// show active content
$(this).next().addClass('acc-active').toggle('slow');
// close all content that isn't active
$('.acc-content:not(.acc-active').slideUp('slow');
return false;
})
// initialize accordion with all content closed
.next().hide();
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
.css({ height: '0px' })
.show()
.animate({ height: '150px' }, 'slow')
.addClass('itsopen acc-active');