How to show different content on clicking the same button

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Hi All,

Today’s topic is,

How to show different content on clicking the same button

You all might be aware of on click show Content/Div etc. i.e. On 1st click you will have your contents reveled/shown but not Showing different content on clicking the same button every time!

What if you want to?

  •  Show different content on clicking the same button every time

For example – On the 1st click, 2nd click and show more content on your 3rd click and so on… Mind you – clicks are done on the same HTML Elements like links,Button etc every time.

So, have you ever wonder how to show/reveal different Content/Div every time you click on the same Button?

 

For example – You have a Button named ‘Show content‘. Also you have 5 list items which are initially hidden. But, as and when you click the show Button – It should show/reveal all the 5 list item, but 1 by 1 and not all at once.

To be specific:

If you click the ‘Show content‘ Button for the 1st timeIt should show you only the 1st list item. Other 4 list items should be still hidden.
If you again click on the same ‘Show content’ button for the 2nd timeIt should show/retain the first list item as well as it should show you the 2nd list item.
Likewise – if you click the button for the 3rd, 4th and 5th subsequent numbers, 3rd, 4th and the 5th list item will be displayed.

Isn’t it a unusual and rare requirement!

I guess – this type of requirement will be used in presentations/slide show.

I don’t know if there is a proper method/way to accomplish this. But, I had this solution that satisfied my requirement.

Since, I didn’t find a way online to accomplish this even when I searched Google and Yahoo – so thought do it with my limited knowledge of how to use jQuery and also share with people around.

I will explain you how this works with a comprehensive example.

In this example, I will use jQuery and CSS. CSS will be used to style your list items and the Button itself. jQuery will be used to achieve the on every click functionality.

The below example will use Button to click every time and reveal different content.

See below Screenshot:

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

In this example, I have used Free jQuery Plugin and my own  small Hand written jQuery snippet. I myself wrote it to help out my Project.

What we want?

We want the Button to show different content when every time it is clicked. Mind you – you are clicking the same Button every time!!

For this functionality, I used 5 Buttons and 5 List items as follows.

Now, you might be wondering – Oh! in the markup there are 5 buttons – but as per our requirement only 1 button should be displayed in the page always.

Yes, you are right!! What I’d do is – using CSS, I’ll hide all the buttons initially. See below:

Now what?

Ok, according to the above CSS – all the Buttons in the Page will be initially hidden. Then where is the button to click on??

Hold on – I’ll get that button back for you to click. Please see below:

What I did is – I called the pseudo selector and got back the 1st Button on the page for you to click on!

Next, all your List items have to be hidden as well. We’ll right a small Style to hide that as follows:

Now that all the list items are hidden and you have a Button to click and reveal those hidden list items 1 by 1.

How do we get those list items to display on every click?

We achieve that by using jQuery Library and my hand written jQuery snippet. We’ll go through those steps:

You need to add in the jQuery Library as follows.

Please click on the link http://jquery.com/download/ to download the jQuery library. After you download, add that as shown below:

OR

You can even copy the already hosted link of the jQuery library from the same website. For example, see below for what I have got.

You can always visit http://jquery.com/download/ for the latest versions available.

Next, the hand written jQuery snippet that enables you to reveal your content on every click.

What the above code snippet does?

On every click – the Button shows you the hidden list item using $(“#”).show();

Not only thatEvery time when you click on the Button, the Button itself hides and displays a new button.

I’ll explain how it works:

We will take the First event. This is when you see only the 1st Button. When you click on the button for the 1st time – the following function runs.

Like wise, On every click – the Button that you clicked is disappeared and a New Button is made to appear. So that every time you click on a new button and reveal new contents.

Please see below the various stages of clicks and reveals!

By default:

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

1st click

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

2nd click

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

3rd click

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

4th click

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

5th click

How to show different content on clicking the same button PepFry

How to show different content on clicking the same button

Might be – this is the static way to do it.
I just thought to share my findings of my own to you. Count on me – this works on all the browsers. I believe – this can be used in small static projects.

 

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">