Populating a Div with Information

Question

Populating a Div with Information

I'm currently working on a project where I have a div with predefined dimensions, but the content inside is set to not display initially.

Above this div, there are several p tags that act as clickable links to reveal different content within the div when clicked. However, I'm having trouble getting this functionality to work properly.

HTML

<p id="link1">Content 1</p>
<p id="link2">Content 2</p>
<p id="link3">Content 3</p>

<div class="subcontent">
<div class="hide cont1">
<p>Title</p>
<p>Content 1</p>
</div>
<div class="hide cont2">
<p>Title</p>
<p>Content 2</p>
</div>
<div class="hide cont3">
<p>Title</p>
<p>Content 3</p>
</div>
</div>

CSS

.subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide {
    display: none;

Can anyone provide suggestions on how to make Content 1 visible when #link1 is clicked?

Additionally, how can I ensure that any previously displayed content is hidden before revealing new content?

I apologize if my explanation is unclear - I am still learning and appreciate any guidance provided.

javascript jquery html css

Answer 1

Answer №1

Here are a couple of important steps:

1) Ensure that you have the click event handler set up for p elements.

2) Next, make sure to retrieve the number from the id of the clicked element.

3) Use this extracted number to generate a selector for targeting the specific div you want.

 $("p[id^=link]").click(function(){
  var currentDivId = this.id.replace( /[^\d.]/g, '' );
  $('.hide').not(".cont"+currentDivId).hide();
  $(".cont"+currentDivId ).toggle();
 });

See Working Demo Here

Answer 2

Here are a couple of important steps:

1) Ensure that you have the click event handler set up for p elements.

2) Next, make sure to retrieve the number from the id of the clicked element.

3) Use this extracted number to generate a selector for targeting the specific div you want.

 $("p[id^=link]").click(function(){
  var currentDivId = this.id.replace( /[^\d.]/g, '' );
  $('.hide').not(".cont"+currentDivId).hide();
  $(".cont"+currentDivId ).toggle();
 });

See Working Demo Here

Answer 3

Answer №2

If you're working with JavaScript and/or JQuery, leveraging EventHandlers for onclick events can be quite powerful. By assigning event handlers to the onclick events of specific HTML elements identified by their ID's, you can create interactive functionalities. The function triggered by these event handlers can dynamically alter the display of associated divs.

It would be beneficial to explore more about event handlers beyond just onclick. There are various triggers such as mouseover that can enhance the interactivity of your web pages.

Answer 4

If you're working with JavaScript and/or JQuery, leveraging EventHandlers for onclick events can be quite powerful. By assigning event handlers to the onclick events of specific HTML elements identified by their ID's, you can create interactive functionalities. The function triggered by these event handlers can dynamically alter the display of associated divs.

It would be beneficial to explore more about event handlers beyond just onclick. There are various triggers such as mouseover that can enhance the interactivity of your web pages.

Answer 5

Answer №3

Just for kicks, I decided to tackle the entire thing using vanilla Javascript. I made some tweaks to the html handlers. :)

<style>
#subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide{
    display: none;
}
</style>
</head>
<body>

<a href="#" id="link1">Section 1</a>
<a href="#" id="link2">Section 2</a>
<a href="#" id="link3">Section 3</a>

<div id="subcontent">
    <div id="cont1" class="hide">
        <p>Header</p>
        <p>Content 1</p>
    </div>
    <div id="cont2" class="hide">
        <p>Header</p>
        <p>Content 2</p>
    </div>
    <div id="cont3" class="hide">
        <p>Header</p>
        <p>Content 3</p>
    </div>
</div>
<script>

//retrieve document elements
var link1 = document.getElementById('link1');
var link2 = document.getElementById('link2');
var link3 = document.getElementById('link3');

link1.addEventListener('click', function(){
    showContent('cont1');
});

link2.addEventListener('click', function(){
    showContent('cont2');
});   

link3.addEventListener('click', function(){
    showContent('cont3');
});     

function showContent(idName) {
    var children = document.getElementById('subcontent').childNodes;

    for(var i = 0; i < children.length; i++) {
        if(children[i].nodeName == "DIV") {
            children[i].style.display = "none";
        };
    };
    document.getElementById(idName).style.display = "block";
};
</script>

Answer 6

Just for kicks, I decided to tackle the entire thing using vanilla Javascript. I made some tweaks to the html handlers. :)

<style>
#subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide{
    display: none;
}
</style>
</head>
<body>

<a href="#" id="link1">Section 1</a>
<a href="#" id="link2">Section 2</a>
<a href="#" id="link3">Section 3</a>

<div id="subcontent">
    <div id="cont1" class="hide">
        <p>Header</p>
        <p>Content 1</p>
    </div>
    <div id="cont2" class="hide">
        <p>Header</p>
        <p>Content 2</p>
    </div>
    <div id="cont3" class="hide">
        <p>Header</p>
        <p>Content 3</p>
    </div>
</div>
<script>

//retrieve document elements
var link1 = document.getElementById('link1');
var link2 = document.getElementById('link2');
var link3 = document.getElementById('link3');

link1.addEventListener('click', function(){
    showContent('cont1');
});

link2.addEventListener('click', function(){
    showContent('cont2');
});   

link3.addEventListener('click', function(){
    showContent('cont3');
});     

function showContent(idName) {
    var children = document.getElementById('subcontent').childNodes;

    for(var i = 0; i < children.length; i++) {
        if(children[i].nodeName == "DIV") {
            children[i].style.display = "none";
        };
    };
    document.getElementById(idName).style.display = "block";
};
</script>

Answer 7

Answer №4

If you're looking for a solution using JQuery, the following code might be helpful. While there may be more elegant options available, this code should get the job done. Check out the JSFiddle demo for a live example.

$("#link1").click(function(){
    $(".cont1").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link2").click(function(){
    $(".cont2").removeClass("hide");
    $(".cont1").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link3").click(function(){
    $(".cont3").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont1").addClass("hide");
});

Answer 8

If you're looking for a solution using JQuery, the following code might be helpful. While there may be more elegant options available, this code should get the job done. Check out the JSFiddle demo for a live example.

$("#link1").click(function(){
    $(".cont1").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link2").click(function(){
    $(".cont2").removeClass("hide");
    $(".cont1").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link3").click(function(){
    $(".cont3").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont1").addClass("hide");
});

Answer 9

Answer №5

I made a small modification to your HTML code to implement event delegation. This adjustment will enhance the maintainability of your code, especially if you plan to add more DIVs and links in the future.

<div id="links">
  <p id="link1">Content 1</p>
  <p id="link2">Content 2</p>
  <p id="link3">Content 3</p>
</div>

Below is the script:

document.getElementById('links').addEventListener('click', function(e) {
    var index = e.target.id.slice(4);
    var showing = document.querySelector('.subcontent > div:not(.hide)');
    if(showing) {
        showing.classList.add('hide');
    }
    document.querySelector('.subcontent > div.cont' + index).classList.remove('hide');
}, false);

Explanation:

Extract the index of the clicked link by retrieving the number from its ID
Determine the currently visible div that does not have the class 'hide'
If there is a visible div, hide it by adding the class 'hide'
Identify the div you intend to display and remove the class 'hide' from it

Answer 10

I made a small modification to your HTML code to implement event delegation. This adjustment will enhance the maintainability of your code, especially if you plan to add more DIVs and links in the future.

<div id="links">
  <p id="link1">Content 1</p>
  <p id="link2">Content 2</p>
  <p id="link3">Content 3</p>
</div>

Below is the script:

document.getElementById('links').addEventListener('click', function(e) {
    var index = e.target.id.slice(4);
    var showing = document.querySelector('.subcontent > div:not(.hide)');
    if(showing) {
        showing.classList.add('hide');
    }
    document.querySelector('.subcontent > div.cont' + index).classList.remove('hide');
}, false);

Explanation:

Extract the index of the clicked link by retrieving the number from its ID
Determine the currently visible div that does not have the class 'hide'
If there is a visible div, hide it by adding the class 'hide'
Identify the div you intend to display and remove the class 'hide' from it

Populating a Div with Information

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Display or conceal a div depending on the value of an integer stored in the $scope variable

When working with ReactJs, you may encounter a delay in adding a class to the li element upon click event

The two-dimensional array in JavaScript has not been defined

Issues with d3.js transition removal functionality not functioning as expected

Regular expressions - Identifies a text string that doesn't contain <html> tags, including all possible scenarios

Is there a way to horizontally align the content in my footer section?

Retrieve information and auto-fill text boxes based on the selected dropdown menu option

javascript has been overrunning with an abundance of attached comments loops

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

Guide on automatically submitting the form within 2 seconds after the user has inputted the data without requiring them to click the submit button

Auto submit the form on page reload in PHP

Is there a way to configure nodemon to automatically monitor changes in dotenv-flow files?

Steps for positioning a div beside a centered div

How to style a date and time object using angularjs

I am facing an issue with my Bootstrap 4 Navbar as it is not collapsing in the Mobile View

I am facing difficulty in accessing information from my API through Angular

I'm just starting to delve into React and I am eager to transform my regular JavaScript code into a React format. However, I am not quite sure how to

Using JavaScript/jQuery to analyze POST values just before submission

Using npm to install packages with multiple package.json files

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file