Easily Update Your Div Content by Simply Clicking a Single Link/Button

Question

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here.

My goal is to display dynamic content within a div. Below you will find the code I currently have:

<script type="text/javascript"><!--
  function AlterContentInContainer(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:AlterContentInContainer('example1div','<p>Content 2</p>')">View another</a></p>

The current functionality allows for 'Content 1' to be replaced by 'Content 2' upon clicking "View another." However, my desired behavior is for subsequent clicks on the "View another" link to replace the div's content with new content like 'Content 3' when 'Content 2' is already displayed.

If anyone can assist me in solving this issue, I would greatly appreciate it.

Thank you in advance :)

javascript jquery html css

Answer 1

Answer №1

Revised based on feedback from the original poster

HTML

Insert the jQuery library file

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

Utilize Plugin https://github.com/fkling/jQuery-Function-Toggle-Plugin --> It can accommodate multiple functions and is suitable for various events.

VIEW DEMO

If you need something similar to 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));

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

Answer 2

Revised based on feedback from the original poster

HTML

Insert the jQuery library file

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

Utilize Plugin https://github.com/fkling/jQuery-Function-Toggle-Plugin --> It can accommodate multiple functions and is suitable for various events.

VIEW DEMO

If you need something similar to 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));

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

Easily Update Your Div Content by Simply Clicking a Single Link/Button

Answer №1

Similar questions

"Creating a new page dynamically by populating it with a variable that was set on the previous page

Validation issue with Reactive Forms not functioning as expected

Creating a interactive navigation bar with External JSON data in HTML and JavaScript

Using AJAX to fetch information from a different page following a post request

Change the name of a file to a name chosen by the user while uploading it to an

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

Workaround for syncing MobX observables when toggling a select/deselect all checkbox

Having trouble running Javascript with jQuery's ajax load()?

What strategies can be employed to enhance the natural movement of dots on my HTML canvas?

The Javascript navigate method has detected an incorrect language being used

Utilize jQuery to transform array values into date objects

What are the methods for incorporating reflection into three.js?

Add a span tag with the class "javascript" around the index of a character within a string

Refreshing the dropdownlist data from the database without the need to reload the entire page

Vue-Routes is experiencing issues due to a template within one of the routes referencing the same ID

Oops! Looks like there was an issue with assigning to a reference or variable: Error: Uncaught (in promise)

Leveraging the power of JavaScript functions together with the asp:Timer component

Linking all styles with Angular 2

What is the origin of this mysterious error?

Is there a way to work around the CORS policy in order to fetch data from URLs?