Show Text When Clicking Within Separate DIVs

Question

Show Text When Clicking Within Separate DIVs

I have a set of three divs. One contains a Twitter icon, another holds a LinkedIn icon, and the last one is designated for displaying text upon clicking.

My goal is to click on the Twitter icon and have corresponding text appear in the third div. Then, if I click on the LinkedIn icon, the displayed text will change to show specific content related to LinkedIn. These are not live feeds. Currently, when I click on the Twitter icon, the text appears below the icon instead of in the designated "Posts Go Here" div that I require.

The main page utilizes a .php extension.

The HTML code for the divs is as follows:

<div class="capamb-row-padding">
    <div class="capamb-third">
      <p><label for="toggle">
      <img src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" />
      </label>
      <input type="checkbox" id="toggle" />
      <span>Your text here</span>
    </div>

   <div class="capamb-third">
       <p><img src="/images/capambassador/capamb-linkedin-icon.png" width="75" height="75" /></p>
    </div>

    <div class="capamb-third">
        <h2>Tweets</h2>
        <p>Posts Go Here</p>
    </div>
</div>

javascript jquery css

Answer 1

Answer №1

Take a look at the code snippet below.

$(function() {
  $('img[alt="twitter"]').click(function() {
    $('div.capamb-third:nth-child(3) h2').text('Tweets');
    $('div.capamb-third:nth-child(3) p').text('Twitter Posts Go Here');
  });
  $('img[alt="linkedin"]').click(function() {
    $('div.capamb-third:nth-child(3) h2').text('Posts');
    $('div.capamb-third:nth-child(3) p').text('LinkedIn Posts Go Here');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="capamb-row-padding">
  <div class="capamb-third">
    <p>
      <label for="toggle">
        <img src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" alt="twitter" />
      </label>
      <input type="checkbox" id="toggle" />
      <span>your text here</span>
  </div>
  <div class="capamb-third">
    <p>
      <img src="/images/capambassador/capamb-linkedin-icon.png" width="75" height="75" alt="linkedin" />
    </p>
  </div>
  <div class="capamb-third">
    <h2>Tweets</h2>
    <p>Posts Go Here</p>
  </div>
</div>

Answer 2

Take a look at the code snippet below.

$(function() {
  $('img[alt="twitter"]').click(function() {
    $('div.capamb-third:nth-child(3) h2').text('Tweets');
    $('div.capamb-third:nth-child(3) p').text('Twitter Posts Go Here');
  });
  $('img[alt="linkedin"]').click(function() {
    $('div.capamb-third:nth-child(3) h2').text('Posts');
    $('div.capamb-third:nth-child(3) p').text('LinkedIn Posts Go Here');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="capamb-row-padding">
  <div class="capamb-third">
    <p>
      <label for="toggle">
        <img src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" alt="twitter" />
      </label>
      <input type="checkbox" id="toggle" />
      <span>your text here</span>
  </div>
  <div class="capamb-third">
    <p>
      <img src="/images/capambassador/capamb-linkedin-icon.png" width="75" height="75" alt="linkedin" />
    </p>
  </div>
  <div class="capamb-third">
    <h2>Tweets</h2>
    <p>Posts Go Here</p>
  </div>
</div>

Answer 3

Answer №2

A simple example without using jQuery:

Here is the trigger element:

<img id="trigger" src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" />

And here is the target element:

<p id="hidden-text">Posts Go Here</p>

This is the JavaScript code:

var trigger = document.getElementById('toggle'),
    hidden = document.getElementById('hidden-text');

trigger.addEventListener('click', function(){
    hidden.style.display = 'block';
});

Answer 4

A simple example without using jQuery:

Here is the trigger element:

<img id="trigger" src="/images/capambassador/capamb-twitter-icon.png" width="75" height="75" />

And here is the target element:

<p id="hidden-text">Posts Go Here</p>

This is the JavaScript code:

var trigger = document.getElementById('toggle'),
    hidden = document.getElementById('hidden-text');

trigger.addEventListener('click', function(){
    hidden.style.display = 'block';
});

Answer 5

Answer №3

Here is a simple JavaScript solution for you to consider:

To begin, assign an identifier to each of the div elements. For example, let's use div1, div2, and div3.

Next, add an

onclick="displayValue(div1.value)"

attribute to the first div and

onclick="displayValue(div2.value)"

attribute to the second div.

The implementation of the displayValue(a) function can be as follows:

function displayValue(a){
    div3.innerHTML += a;
}

I hope this explanation is helpful!

Answer 6

Here is a simple JavaScript solution for you to consider:

To begin, assign an identifier to each of the div elements. For example, let's use div1, div2, and div3.

Next, add an

onclick="displayValue(div1.value)"

attribute to the first div and

onclick="displayValue(div2.value)"

attribute to the second div.

The implementation of the displayValue(a) function can be as follows:

function displayValue(a){
    div3.innerHTML += a;
}

I hope this explanation is helpful!

Answer 7

Answer №4

If you're looking for a helpful script, this could be what you need. The third div is located at the bottom of the code.

<!DOCTYPE html>
<html>
<head>
<title>your title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
 <div class="capamb-row-padding">
  <div class="capamb-third" id='one'>
    <p>
      <label for="toggle">
        <img src="https://g.twimg.com/Twitter_logo_blue.png" width="75"
         height="75" />
      </label>
      <input type="checkbox" id="toggle" />
      <span>your text here</span>
  </div>
  <div class="capamb-third" id='two'>
    <p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/768px-LinkedIn_logo_initials.png" 
       width="75" height="75" />
    </p>
  </div>
  <div class="capamb-third" id='three'>
   
  </div>
</div>
<script>
$("#one").click(function(){
    $("#three").html("<h2>Tweets</h2><br><p>Tweets go here</p>");
});
$("#two").click(function(){
    $("#three").html("<h2>Linkedin</h2><br><p>Posts Go Here</p>");
});
</script>
</body>
</html>

Answer 8

If you're looking for a helpful script, this could be what you need. The third div is located at the bottom of the code.

<!DOCTYPE html>
<html>
<head>
<title>your title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
 <div class="capamb-row-padding">
  <div class="capamb-third" id='one'>
    <p>
      <label for="toggle">
        <img src="https://g.twimg.com/Twitter_logo_blue.png" width="75"
         height="75" />
      </label>
      <input type="checkbox" id="toggle" />
      <span>your text here</span>
  </div>
  <div class="capamb-third" id='two'>
    <p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/768px-LinkedIn_logo_initials.png" 
       width="75" height="75" />
    </p>
  </div>
  <div class="capamb-third" id='three'>
   
  </div>
</div>
<script>
$("#one").click(function(){
    $("#three").html("<h2>Tweets</h2><br><p>Tweets go here</p>");
});
$("#two").click(function(){
    $("#three").html("<h2>Linkedin</h2><br><p>Posts Go Here</p>");
});
</script>
</body>
</html>

Show Text When Clicking Within Separate DIVs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transferring binary data from C# to Node.js for deserialization

Express.js Server Side Rendering - GET request for '/json/version/'

Is there a way to activate the width styling from one class to another?

Tips for adding responses to input fields in AngularJS

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

Positioning Firefox absolutely within a table-cell element is possible

When the user clicks, I plan to switch the audio source

What is the process for a server to transmit a JWT token to the browser?

Updating CSS for dropdown menu in Fluent/Fabric design

Cannot locate element using React Testing Library with the selector: [data-testid="task"]

Encountering an internal/modules/cjs/loader.js:892 error when attempting to install the newest version of node.js on Windows 10

Idle Time in Nextjs - Making the Most of D

Error functions in Angular HTTP Interceptor are not being triggered

Sending an array as JSON data to PHP using the $.ajax post method. The $_POST array is

Fengyuanchen's jQuery cropper plugin: Ensuring Minimum Crop Validation

What is the best way to adjust a <div> element so that it stays centered on the webpage while also keeping its size attributes intact?

Is there a way to bring in a variable from the front end script?

JS | How can we make an element with style=visibility:hidden become visible?

The download attribute in HTML5 seems to be malfunctioning when encountering a 301 Moved Permanently

Encountering a predicament when attempting to retrieve an image from an alternative