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

The changing of colors does not function properly when clicked in JavaScript

What is the best way to handle a JSON arraylist in a Node.js environment?

Incorrect formatting of HTML emails in Outlook

Refresh the Vue page only once after it is mounted

Using anchor tags to send HTML code through email

Showing list data from script to template in vue - A step-by-step guide

Cut off a string from the start

I am unable to utilize the Web Share API for sharing a file within my React app written in TypeScript

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

Changing a background image url using jQuery by clicking a button

Using Angular 10 to make an HTTP POST request, with the goal of appending a string

What is the best way to send data to an API controller using AJAX in an MVC framework?

Implementing a play and pause button functionality for the carousel in Bootstrap 5

What are some strategies I can implement to effectively manage different errors and ensure the app does not crash

Having trouble retrieving a path reference from Firebase Storage using getDownloadURL() in React Native?

Efficiently loading a jQuery plugin with lazy loading

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

Customize the appearance of the submit button by using CSS to replace

Error in thread : TagNameUnexpectedException

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and