Home > Programming, Servers & Scripts >

Easily Show/Hide Content on Your LPs with JQuery (8)

03-23-2012 01:53 PM #1 brianb (Member)
Easily Show/Hide Content on Your LPs with JQuery

Hey guys,

I'm not a programmer, but I just spent a little while putting together a basic way to toggle through divs on your landers via JQuery. There are a lot of creative ways to use something like this, which basically lets you show only a bit of content at a time, while staying on the same page. Think surveys, quizzes, etc.

CSS:

Create a div for each section that will be toggled on/off. The first div should be set for display:inline, while the rest would be display:none.

Code:

#part1 {
	display:inline;
}

#part2 {
	display:none;
}

#part3 {
	display:none;
}

#part4 {
	display:none;
}

#final {
	display:none;
}

Javascript

To add the JQuery library:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Script to toggle through divs:

Code:

<script>
$(function() 
{
  $("#toggle").toggle(function()
  { // first click
    $("#part1").hide();
    $("#part2").show();
  },
  function()
  { // next click
    $("#part3").show();
    $("#part2").hide();
	},
  function()
  { // next click
    $("#part4").show();
    $("#part3").hide();
	  },
  function()
  { // next click
    $("#final").show();
    $("#part4").hide();
	$("#message").hide();
  });
});
</script>

HTML

Code:

<div id="message">
Intro Message:
<a id="toggle" href="javascript:void(0);">Click Here</a>
</div>
<div id="part1">
This is part 1.
</div>
<div id="part2">
This is part 2.
</div>
<div id="part3">
This is part 3.
</div>
<div id="part4">
This is part 4.
</div>
<div id="final">
This is the final part.
</div>
</div>

---------------------

That'll do it! The cool thing is that you can do easily add as many of the "next click" functions within the JS.

03-23-2012 03:46 PM #2 threehundred (Member)

Nice tip. This is great for trying to keep info above the fold (with your call to action), but still gives the user the ability to get more info, without going to another page or below the fold.

03-23-2012 04:01 PM #3 dubbsy (Member)

nice share! thanks brian

03-23-2012 09:07 PM #4 danny27 (AMC Alumnus)

Cool Thanks Brianb. Speaking of jquery - how do you use it to hide a div after about 3 seconds and show another div instead?

03-23-2012 11:39 PM #5 brianb (Member)

^Ha. I've been trying to figure this exact thing out. Not sure...I'm sure someone here can whip that out in 30 seconds...

03-23-2012 11:53 PM #6 brianb (Member)

Originally Posted by danny27

how do you use it to hide a div after about 3 seconds and show another div instead?

Got it:

Code:

function()
  { // next click
   $("#final").show();
   $("#q4").hide();
   $("#message").hide();
  setTimeout(function() {
    $('#final').hide();
}, 1000);
	setTimeout(function() {
    $('#final2').show();
}, 1000);

The 1000 above tells it to hide #final and show #final2 after 1000 milliseconds.

03-24-2012 05:06 PM #7 tijn (Moderator)

awesome stuff!

04-03-2012 08:39 PM #8 offersnet (Member)

Solid Brian! Thanks brotha!

Home > Programming, Servers & Scripts >