Question

So I have this code at the moment. Basically i have a button you click on it and the div that the button is in closes and another div toggles up. The thing is i want to make a bunch of buttons that will load in different content into the second div depending on which you click. Does anyone have any ideas of the best way to achieve this? http://jsfiddle.net/PDzFj/

Jquery

$(function() {
$('.clickme').click(function() {
   var tot = $('.maindiv');
   var exp = $('.contentdiv');

   var frt = (tot.is(":visible"))?tot:exp;
   var lst = (tot.is(":visible"))?exp:tot;

   frt.slideToggle('slow','easeInOutExpo', function() {
   lst.slideToggle('slow','easeInOutExpo', function() {/*complete*/});
   });
});
});

HTML

<div class="wrapper">

<div class="maindiv">
<div class="button clickme">Page One</div>
<div class="button clickme">Page Two</div>
<div class="button clickme">Page Three</div>
<div class="button clickme">Page Four</div>
<div class="clearit"></div>
</div>

<div class="contentdiv">
<div class="button clickme">Back</div>
Different content loads here (eg. page one, page two, page three...)
</div>

</div>

CSS

.wrapper{
  width:800px;
}

.maindiv{
  width:760px;
  padding:20px;
  background:lightblue;
}

.contentdiv{
  width:760px;
  padding:20px;
  background:blue;
  display:none;
}

.button{
  background:#eee;
  height:100px;
  width:100px;
  text-align:center;
  line-height:100px;
  margin:2px;
  float:left;
}
.clearit{
  clear:both;
}

Answer 1

$(function() {
    $('.clickme').click(function() {
        // just cache the clicked element 
        var self = this;
        var tot = $('.maindiv');
        var exp = $('.contentdiv');

        var frt = (tot.is(":visible")) ? tot : exp;
        var lst = (tot.is(":visible")) ? exp : tot;

        frt.slideToggle('slow', function() {
            // and append it here
            lst.append(self).slideToggle('slow')
        });
    });
});

http://jsfiddle.net/EHKdp/

if you want to load other pages, you can use jQuery load method and store the path of the pages in data attributes or better use anchor links instead of the div elements.

<div class="maindiv">
  <div class="button clickme" data-target="/path-to.file">Page One</div>
  <div class="button clickme" data-target="/path-to.file">Page Two</div>
  <div class="button clickme" data-target="/path-to.file">Page Three</div>
  <div class="button clickme" data-target="/path-to.file">Page Four</div>
  <div class="clearit"></div>
</div>

$(function() {
    $('.clickme').click(function() {

        var path = this.dataset.target;

        var tot = $('.maindiv');
        var exp = $('.contentdiv');

        var frt = (tot.is(":visible")) ? tot : exp;
        var lst = (tot.is(":visible")) ? exp : tot;

        frt.slideToggle('slow', function() {
            lst.load(path, function(){
               $(this).slideToggle('slow')
            })
        });
    });
});