Question 43097 in Html Question posted in
Some basic documentation can be found here.

Expand <p> when clicking on <h1> using javascript, css and html (no jquery)

I would like to have all of my paragraph text collapsed when the page loads. When I click on the heading, the paragraph text should expand. I have multiple headings (all ) that all contain on paragraph below them. This is part of a course I am doing and we have not learned JQuery yet so I need this to work without the use of JQuery. I have placed each of the blocks within a with the class="maincontent". See code snippet below:

    <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>

I would really appreciate any help. Thank you.

I have added a screen shot of my website below. From the screen shot, I would like the text under "How HowziTO Came to be?" to be collapsed until I click on the heading and then it expands. I would like it to work for the other two headings as well.

Website

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for all the help everyone. After searching through the options provided, I decided to use an onClick function. Below is my JS:

    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 had to add the following to my HTML:

    <h2 onclick="toggleParagraph(event)">

    and

    <p class="displayme">

    as well as the following to my CSS

    .displayme {
    display: none;
}

    and

    table {
display: none;
{

    This allowed me to toggle the display on and off.


  2. 0

    In your code, you can add ‘id’ to your p tag and pass the id to the onclick function handler on the h2 tag like this –

    <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>

    add display: none; to the p tag.

    And add JavaScript like this –

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

    Every time you add a p tag add the element id to it and pass on the id to the expand function in the h2 tag. The function automatically closes the other tags and expands the required one.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search