Changing content of div tag dynamically

Question

I've created a html page which consists of 4 div sections.

How do I change the contents of 1 section based on an event in another (eg: when a button is pressed)?

Answer 1

You would need a link and a redirect or some javascript on practically any element type.

A little more detail would help with a more detailed answer.

Kindness,

Dam

Answer 2

Using javascript. Set an id on the div you want to change and the one you want to copy(?) from, set an onClick event handler for your button, and in the called function, get the divs (with document.getElementById), and use the innerHTML method of each to either get or set the HTML for the div.

Answer 3

Hi Adam,

in general some code example or something similar is helpful to explain problems and solutions. ;)

If you're searching for how to react on different browsers you'll be finding some very good articles with the keyword 'browser sniffing'. Check wikipedia too! Note that there are a lot of different approaches in both css and javascript.

Answer 4

You could use JavaScript for that, I will give you a jQuery example as I'm used to it:

HTML markup:

<div id="section1">
    <p>CONTENT</p>
</div>
<div id="section2">
    <p>CONTENT</p>
</div>
<div id="section3">
    <p>CONTENT</p>
</div>
<div id="section4">
    <p>CONTENT</p>
</div>
<ul id="change-buttons">
    <li><a href="#" id="change1">Change content of 1st section</a></li>
    <li><a href="#" id="change2">Change content of 2nd section</a></li>
    <li><a href="#" id="change3">Change content of 3rd section</a></li>
    <li><a href="#" id="change4">Change content of 4th section</a></li>
</ul>

And here is a the javascript:

$(document).ready(function() {
    $('#change-buttons a').click(function() {
        var num = $(this).attr('id');
        num = num.substr(-1);
        $('#section' + num).text('NEW CONTENT');
    });
});

Of course you must include the jQuery in the header section of your html:

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>

This is just a general example, if you were more specific I would give you more specific advice.