Jquery toggle - loading in different content

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;
}

Ram · Accepted Answer · 2012-11-14 01:31:06Z

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')
            })
        });
    });
});

edited Nov 14, 2012 at 1:31

answered Nov 14, 2012 at 1:09

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Rogers Over a year ago

how can i load in other text? that page three is just a button. I want to be able to click on that and then the page will toggle into view

Ram Over a year ago

@MattRogers The best option is using AJAX, you can use jQuery load method and store the path of the target page in data attributes. api.jquery.com/load

Matt Rogers Over a year ago

what if i had all the pages in that div already and i just wanted to show the page that related the button that was clicked how would i go about doing that?

Ram Over a year ago

@MattRogers Then you can show and hide the elements based on the clicked element.

Sushanth -- · Accepted Answer · 2012-11-14 01:10:19Z

0

Try this

$(function() {
    $('.clickme').click(function() {
        var tot = $('.maindiv');
        var exp = $('.contentdiv');
        var html = $(this).html();
        exp.slideUp('slow', function() {
            $(this).html(html).delay(500).slideDown('slow');
        });

    });
});

CHeck Fiddle

answered Nov 14, 2012 at 1:10

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Matt Rogers Over a year ago

where is the text coming from for that?

JamiePatt · Accepted Answer · 2012-11-14 01:13:02Z

0

The best way would be to use AJAX and load text from an external .txt file, you can get a real quick run down on how to do this here.

answered Nov 14, 2012 at 1:13

JamiePatt

432 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery toggle - loading in different content

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related