How to hide paragraph and make visible with heading click using Javascript - Stack Overflow

admin管理员组

文章数量:1310263

I have a question about Javascript. I want to set some paragraphs on my page to hidden when the page loads, then have the paragraphs accessed by clicking on the heading. This is the html:

<div id="rightside">
    <div id="story1">
        <h3>Spice Girls premiere new song</h3>
        <p class="news"> 
            <em>Headlines (Friendship Never Ends)</em> 
            is the first new single from the reformed girl band since 2000 and is the official Children In Need track for 2007.
        </p>
        <p class="news">
            Geri Halliwell, Victoria Beckham, Melanie Brown, Melanie Chisholm and Emma Bunton have regrouped to promote a new Spice Girls' greatest hits album and an uping world tour.  <a href="#">more ...</a>
        </p>
    </div>
</div>

And this is the Javascript I have that isn't working:

function hideElementByVisible('news'){
    document.getElementsByClassName('news').style.visibility = "none";
}

function showElementByDisplay('news',prop){
    if(prop == "block"){
        getElementsByClassName('news').style.display = "block";
    }
    else if(prop == "inline"){
        getElementsByClassName('news').style.display = "inline";
    }
}
window.onload=hideElementByVisible;

I'm getting an error saying that an identifier is expected in the first line of the Javascript but I can't think what that could be. Help please?

I have a question about Javascript. I want to set some paragraphs on my page to hidden when the page loads, then have the paragraphs accessed by clicking on the heading. This is the html:

<div id="rightside">
    <div id="story1">
        <h3>Spice Girls premiere new song</h3>
        <p class="news"> 
            <em>Headlines (Friendship Never Ends)</em> 
            is the first new single from the reformed girl band since 2000 and is the official Children In Need track for 2007.
        </p>
        <p class="news">
            Geri Halliwell, Victoria Beckham, Melanie Brown, Melanie Chisholm and Emma Bunton have regrouped to promote a new Spice Girls' greatest hits album and an uping world tour.  <a href="#">more ...</a>
        </p>
    </div>
</div>

And this is the Javascript I have that isn't working:

function hideElementByVisible('news'){
    document.getElementsByClassName('news').style.visibility = "none";
}

function showElementByDisplay('news',prop){
    if(prop == "block"){
        getElementsByClassName('news').style.display = "block";
    }
    else if(prop == "inline"){
        getElementsByClassName('news').style.display = "inline";
    }
}
window.onload=hideElementByVisible;

I'm getting an error saying that an identifier is expected in the first line of the Javascript but I can't think what that could be. Help please?

• javascript

Share Improve this question Follow edited May 25, 2014 at 4:01 bcorso 47.2k1010 gold badges6464 silver badges7676 bronze badges asked May 25, 2014 at 3:04 tdrsamtdrsam 52711 gold badge88 silver badges2929 bronze badges 1

• I know it's kind of late, but I added another answer with some suggestions for improving user2964055's answer. – bcorso Commented Jun 3, 2014 at 21:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

jQuery(document).ready(function() {

$('#story1').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story2').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story3').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story4').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

});

Obviously with this the jquery.js file has to be attached to the document as well.

As @Notulysses says, you're error (or one of them) is due to trying to set a style on a list of elements instead of the individual elements. However, I also want to remend a different, more structured approach to achieving what you want.

Here's a jsfiddle demonstrating the code below.

Try the following.

1. Put each story in it's own <div class="story"> (the "story" class will allow you to access it easily in js).
2. In each story add the heading <h3>Heading</h3> and news <p class="news"> (the "news" class will allow you to access it easily through js).
3. Finally use addEventListener("click",...) to toggle "hide" on a "news" class when a "story" is clicked.

HTML

    <div id="rightside">
        <div class="story">
            <h3>Story 1</h3>
            <p class="news hide"> 
                <em>Headlines (Story 1!)</em> This is story1 news.
            </p>
        </div>

        <div class="story">
            <h3>Story 2</h3>
            <p class="news hide"> 
                <em>Headlines (Story 2!)</em> This is story2 news.
            </p>
        </div>
    </div>

Javascript

    stories = document.getElementsByClassName('story');     
    for (var i = 0; i < stories.length; i++) {              // for each story
        stories[i].addEventListener("click", function () {  // add an onClick listener
            news = this.getElementsByClassName('news');     
            for (var j = 0; j < news.length; j++) {         // for each news in story
                news[j].classList.toggle('hide');           // toggle 'hide' on clicked
            }
        });
    }

CSS

    .hide{
        display: none;
    }

@user2964055's had a great answer using JQuery, however I would suggest a couple things differently.

1. I would use Classes instead of IDs for the stories (unless the styling or actions of e.g. #story1 is different from #story2). Using classes will allow you to remove the redundancy shown in @user2964055's answer by using a single $('.story') to set the style and action of all stories at once.

2. I would replace the .find('p'), .find('h3'), and .next() with queries that are less coupled with the choice and placement of HTML tags; e.g:

   • .find('p') => .find('.news')
   • .find('h3') => .find('.title')
   • .next() => .sibling('.news')

   This will allow you to change the tags (e.g. if title tag changes h3 to h2) without affecting the javascript.

The following will find every .story class and toggle the visibility of the .news content when the .title is clicked (jsfiddle here).

HTML

<div id="rightside">
    <div class="story">                               <------- this is a story
        <h3 class="title"> Story 1 </h3>              <------- it includes a title
        <p  class="news"> This is story1 news. </p>   <------- and (sibling) news
    </div>

    <div class="story">                               <------- Add as many stories
        <h3 class="title"> Story 2 </h3>                       as you want
        <p  class="news"> This is story2 news. </p>  
    </div>                                                       
</div>

Javascript

jQuery(document).ready(function() {
    $('.story')                            // Filter: .stories
        .find('.news')                     // Filter: .stories .news
            .hide()                        // Hide all
            .end()                         // End current filter
        .find('.title')                    // Filter: .stories .title
            .click( function(){            // Set the onclick action
                $(this).siblings('.news')  // Filter: .stories .news (sibling of .title)
                .slideToggle();            // Toggle visibility
            });
});

jQuery(document).ready(function($) {
$('p').hide();      
    $('h4').click(function() {
        $(this).next().toggle();
    });
});

本文标签： How to hide paragraph and make visible with heading click using JavascriptStack Overflow