Increase the size of <p> upon clicking on <h1> with the use of javascript, css, and html without relying on jquery

Question

Increase the size of <p> upon clicking on <h1> with the use of javascript, css, and html without relying on jquery

Upon loading the page, I want all my paragraph texts to be collapsed. Clicking on the heading should then expand the paragraph text accordingly. Each heading is followed by a single paragraph. As part of my current course, I am unable to utilize JQuery for this functionality. All blocks are enclosed within a div with the class "maincontent". Please refer to the following code snippet:

    <div class="maincontent">
        <h2>How HowziTO came to be? </h2>
            <p>
                This website was created by me, a South African who moved to Toronto in my mid 20's. Through the move, I felt unprepared, and at times, alone. Although there are many sites that offer advice to new immigrants,
                I thought it would be useful to create a site that is specific to South Africans, given our unique heritage. 
                So, if you feel like I felt, hopefull this website will help you settle in a little easier.
                If you have any suggestions for the site, please feel free to reach out to me using the <a href="About.html">the about page</a>.
            </p>
    </div>

Your assistance on this matter would be greatly appreciated. Thank you.

I have included a screenshot of my website below. The text under "How HowziTO Came to be?" should remain collapsed until the heading is clicked, expanding the text. The same behavior is desired for the other two headings as well.

Website

javascript html css

Answer 1

Answer №1

To implement this functionality in your code, simply assign an 'id' to your p tag and then pass that id as a parameter to the onclick function handler on the h2 tag as shown below -

<div class="maincontent">
   <h2 onclick="expand('p1')">How HowziTO came to be?</h2>
   <p id="p1">This website was created by me, a South African who moved to Toronto in my mid 20's. Through the move, I felt unprepared, and at times, alone. Although many sites offer advice to new immigrants,
   </p>
</div>

Don't forget to include display: none; for the p tag in your CSS.

Then, add JavaScript code like the one provided below -

expand = id => {
    let pTags = document.querySelectorAll('p');
    pTags.forEach(ptag => {
        ptag.style.display = 'none';
    });
    document.getElementById(id).style.display = 'block';
};

Whenever you add a new p tag, make sure to give it a unique id and pass that id to the expand function in the corresponding h2 tag. This function will automatically hide other tags and display the required one.

Answer 2

To implement this functionality in your code, simply assign an 'id' to your p tag and then pass that id as a parameter to the onclick function handler on the h2 tag as shown below -

<div class="maincontent">
   <h2 onclick="expand('p1')">How HowziTO came to be?</h2>
   <p id="p1">This website was created by me, a South African who moved to Toronto in my mid 20's. Through the move, I felt unprepared, and at times, alone. Although many sites offer advice to new immigrants,
   </p>
</div>

Don't forget to include display: none; for the p tag in your CSS.

Then, add JavaScript code like the one provided below -

expand = id => {
    let pTags = document.querySelectorAll('p');
    pTags.forEach(ptag => {
        ptag.style.display = 'none';
    });
    document.getElementById(id).style.display = 'block';
};

Whenever you add a new p tag, make sure to give it a unique id and pass that id to the expand function in the corresponding h2 tag. This function will automatically hide other tags and display the required one.

Answer 3

Answer №2

Thank you to everyone who offered their assistance. After carefully reviewing the provided options, I ultimately decided to implement an onClick function. Below is the JavaScript code I used:

function toggleParagraph(event) {
    var clickedHeading = event.target;
    var paragraph = clickedHeading.nextElementSibling;
    var table = paragraph.nextElementSibling;
    if (paragraph.classList.contains("displayme")) {
        if (paragraph.style.display === "none") {
            paragraph.style.display = "block";
            table.style.display = "block";
        } else {
            paragraph.style.display = "none";
            table.style.display = "none";
        }
    }
}

I needed to include the following in my HTML:

<h2 onclick="toggleParagraph(event)">

and

<p class="displayme">

Additionally, I added the following CSS properties:

.displayme {
    display: none;
}

and

table {
display: none;

With these changes, I was able to toggle the visibility of elements on and off as needed.

Answer 4

Thank you to everyone who offered their assistance. After carefully reviewing the provided options, I ultimately decided to implement an onClick function. Below is the JavaScript code I used:

function toggleParagraph(event) {
    var clickedHeading = event.target;
    var paragraph = clickedHeading.nextElementSibling;
    var table = paragraph.nextElementSibling;
    if (paragraph.classList.contains("displayme")) {
        if (paragraph.style.display === "none") {
            paragraph.style.display = "block";
            table.style.display = "block";
        } else {
            paragraph.style.display = "none";
            table.style.display = "none";
        }
    }
}

I needed to include the following in my HTML:

<h2 onclick="toggleParagraph(event)">

and

<p class="displayme">

Additionally, I added the following CSS properties:

.displayme {
    display: none;
}

and

table {
display: none;

With these changes, I was able to toggle the visibility of elements on and off as needed.

Increase the size of <p> upon clicking on <h1> with the use of javascript, css, and html without relying on jquery

Answer №1

Answer №2

Similar questions

Determine the number of lines in a textarea, taking into account both manual

Turn off cursor:pointer for disabled checkbox labels

Is the NodeJS rmdir function experiencing issues specific to LINUX?

Are there any conventional methods for modifying a map within an Aerospike list?

Brainstorm: Creative ways to showcase excess content within a div

Find Discounts Array

Unique CSS animations that vary before and after

Whenever I navigate to localhost:3000 while using Next JS, it redirects me to 'http://localhost:3000/public/index' and displays a 404 error

The Redux store is duplicating the state across different reducers, causing it to appear twice

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

Stylish CSS typography options for both Mac and Windows users

Multer is experiencing difficulties in uploading files, yet it is not displaying any error messages

What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

Error on Laravel 7: Unable to retrieve resource - the server returned a 400 (Bad Request) status code

Effortlessly adjusting the height of a hidden background image

Aligning the block both vertically and horizontally

What is the best way to obtain a virtual in mongoose when a property is excluded?

What is the best way to verify the relationship between parent and children nodes in a tree structure?

Executing asynchronous actions with useEffect

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation