Home/ Questions/Q 6232283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:05:26+00:00

I have a textContainer where there will some default text. And there are some

  • 0

I have a textContainer where there will some default text. And there are some clickable text(A,B,C). When a text is clicked it needs to show the text associated with it(pre define in another div) on the textContainer. I found some tutorial which uses next selector to grab the text but chances are that I will need to update text in several containers. So Try to create a function that will do the work and update text in multiple containers(divs) if needed. I hope it make sense(TGIF..)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){ 
    alert("what what");
  });
 });
</script>

<body>
<div id="textContainer">
    <P>This is where the text is update</P>
</div>

<div class="handler A" >A</div>
<div class="handler B" >B</div>
<div class="handler C" >C</div>

<div class="content textA"> Text A </div>
<div  class="content textB"> Text B </div>
<div  class="content textC"> Text C </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d personally recommend using data- attributes rather than class names to help you identify which handler is tied to which content:

    <div id="textContainer">
    <P>This is where the text is update</P>
</div>
<div class="handler" data-handles="A">A</div>
<div class="content" data-text="A"> Text A </div>
...

<script type="text/javascript">
    $(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){ 
    var identifier = $(this).attr('data-handles');
    var content = $(".content[data-text=" + identifier + "]").html();
    $("#textContainer > p").html(content);
  });
 });
</script>
    • 0