make paragraph element appear and disappear when heading is clicked

Question

I'm attempting to make a p tag appear and disappear when I click on the h1 I feel I have a good understanding of the process in JavaScript (obviously I don't but I cant seem to get it to do anything at all (I'm really new to this, like only a couple weeks into JS) here is the Code

<script type="text/javascript">
        function hideAway() {
            var pText = document.getElementsByClassName('imgpar');
            if (pText.style.display === 'none') {
                pText.style.display = 'block';
            }else if (pText.style.display === 'block') {
                pText.style.display = 'none';
            }
        } 
</script>
<div class="left-image">
    <h1 onClick= hideAway()>header</h1>
    <img title="skater name" src="skater.jpeg" alt="skater">
    <p class= 'imgpar'>skateboard bio
    </p>
</div>

Tags are text in your file. You're talking about _elements_. — isherwood, Jun 02 '21 at 18:10
I apologize, I mistyped the code, its threw errors at me when I attempted to copy/paste it. the link helped some and I understand why it is not working. the only issue with getElementsById is that there are 7 different h1 and 7 different p tags i need to call this one and it seams pretty tedious to give each one a separate id and write out 7 different function for something I could do fairy simply in CSS alone — Omnomymous, Jun 02 '21 at 18:11
am i mistaken to believe that the element is what is contained inside the tags? — Omnomymous, Jun 02 '21 at 18:13
Use loops, like the duplicate's answers mention. No need for ids. — Heretic Monkey, Jun 02 '21 at 18:18

score 1 · Accepted Answer · answered Jun 02 '21 at 18:08

1

Few problems:

.getElementByClassName() is not a function. It should be getElementsByClassName()
.getElementsByClassName() returns an array - in your case you should be selecting the first element
Your if statements are redundant. They can be shortened to a simple if-else statement
You'll need to explicitly apply display:block in the style attribute on the p element so pText.style.display returns something. If you don't explicity set it, you will have to click twice to hide the p element.

This should work:

<div class="left-image">
    <h1 onClick= hideAway()>header</h1>
    <img title="skater name" src="skater.jpeg" alt="skater">
    <p class= 'imgpar' style="display:block">skateboard bio
    </p>
</div>
<script type="text/javascript">
        function hideAway() {
            var pText = document.getElementsByClassName('imgpar')[0];
            if (pText.style.display == 'block') {
                pText.style.display = 'none';
            }else{
                pText.style.display = 'block';
            }
        } 
</script>

answered Jun 02 '21 at 18:08

Spectric

30,714
6
20
43

this allowed me to make the text disapear but clicking the h1 does nothing. do i need to make it a button or a link for onClick to work? – Omnomymous Jun 02 '21 at 18:21
@Omnomymous Have you tried running the code snippet? The text disappears when you click the h1. – Spectric Jun 02 '21 at 18:21
@Spectric I said I'm new at this, I typed it wrong in my editor – Omnomymous Jun 02 '21 at 18:25
@Omnomymous "I typed it wrong in my editor" - what do you mean? What's not working? – Spectric Jun 02 '21 at 18:27
@spectric, I typed .getElementByClass again, it works. im trying to get used to typing the syntax so im not going to just copy paste. practice practice practice am i right? – Omnomymous Jun 02 '21 at 18:35
@Omnomymous Practice makes perfect :) Glad to help – Spectric Jun 02 '21 at 18:36

score 0 · Answer 2 · answered Jun 02 '21 at 18:40

Easy solutions

HTML:

  <div class="left-image">
        <h1>header</h1>
        <img title="skater name" src="skater.jpeg" alt="skater">
        <p class= 'imgpar'>skateboard bio</p>
    </div>

JS:

$(document).ready(function(){
  $("h1").click(function(){
     if ($("p").hasClass("showEle")) {
         $('p').removeClass('showEle')
     } else {
         $('p').addClass('showEle');
     }      
  });
});

CSS:

 .showEle {
     display: none;
    }

make paragraph element appear and disappear when heading is clicked

2 Answers2