javascript - 如何使用 Javascript 隐藏段落并通过标题单击使其可见

Question

我有一个关于 Javascript 的问题。我想在页面加载时将页面上的一些段落设置为隐藏，然后通过单击标题来访问这些段落。这是 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 upcoming world tour.  <a href="#">more ...</a>
        </p>
    </div>
</div>

这是我的 Javascript 无法正常工作:

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;

我收到一条错误消息，指出 Javascript 的第一行需要一个标识符，但我不知道那可能是什么。请帮忙？

Answer 1

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();});

});

显然，jquery.js 文件也必须附加到文档中。