Clicking a div changes another div's content

Question

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.

How can I achieve this?

Answer 1

You can use jQuery , example:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#tab-tab_700964 a').on('click', function(){
      $('.tcw-content').html('hey');
    }); 
});
</script>

<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
    hello
</div>

Answer 2

Go take a look at jQuery . It makes this pretty easy. Your example would look like this:

$('.grp a').click(function(e) {
    e.preventDefault();
    $('.tcw-content').html('new content goes here');
});

To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.

jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Answer 3

Maybe you are looking for a content slider.

HTML Content Slider

:: Featured Content Slider v2.5

Examples

40 examples

Answer 4

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:

http://www.w3schools.com/jquery/event_click.asp

http://api.jquery.com/click/