Dynamic Div Content with just clicking one link/button

Question

I need help here please.

I want to show dynamic content to a div. I already have the code below:

<script type="text/javascript"><!--
  function ReplaceContentInContainer(id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;
}
//--></script>

<div id="example1div" style="padding:10px; text-align:left;">
    <p>Content 1</p>
</div>

<p align="center"><a href="javascript:ReplaceContentInContainer('example1div','<p>Content 2</p>')">View another</a></p>

What it does is, when click the "View another" it replace the 'Content 1' to 'Content 2' but what I want here is that, when 'Content 2' is already shown, I want to click the "View another" link again and replace the div content again with the new content like 'Content 3'.

Anyone please help me solve this.

Thanks in advance :)

Answer 1

Updated after OP's comment

HTML

include jQuery library file

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

Use Plugin https://github.com/fkling/jQuery-Function-Toggle-Plugin --> It accepts an arbitrary number of functions and can be used for any event.

DEMO

You want something like this.

<script type="text/javascript">
/*
 * jQuery Function Toggle Pluing
 * Copyright 2011, Felix Kling
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */

(function ($) {
    $.fn.funcToggle = function (type, data) {
        var dname = "jqp_eventtoggle_" + type + (new Date()).getTime(),
            funcs = Array.prototype.slice.call(arguments, 2),
            numFuncs = funcs.length,
            empty = function () {},
            false_handler = function () {
                return false;
            };

        if (typeof type === "object") {
            for (var key in type) {
                $.fn.funcToggle.apply(this, [key].concat(type[key]));
            }
            return this;
        }
        if ($.isFunction(data) || data === false) {
            funcs = [data].concat(funcs);
            numFuncs += 1;
            data = undefined;
        }

        funcs = $.map(funcs, function (func) {
            if (func === false) {
                return false_handler;
            }
            if (!$.isFunction(func)) {
                return empty;
            }
            return func;
        });

        this.data(dname, 0);
        this.bind(type, data, function (event) {
            var data = $(this).data(),
                index = data[dname];
            funcs[index].call(this, event);
            data[dname] = (index + 1) % numFuncs;
        });
        return this;
    };
}(jQuery));

$('#chnage_p').funcToggle('click', function () {
    $('#example1div').text('Content 1');
}, function () {
    $('#example1div').text('Content 2');
}, function () {
    $('#example1div').text('Content 3');
}, function () {
    $('#example1div').text('Content 4');
});
</script>

Dynamic Div Content with just clicking one link/button

Question

1 answers

solution1
1 2013-09-14 02:26:37

Dynamic Div Content with just clicking one link/button

Question

1 answers

solution1 1 2013-09-14 02:26:37

solution1
1 2013-09-14 02:26:37