studio-benkei

DOMを使って見出しがクリックされるとコンテンツが表示されます。

h2要素にid＝news1Titleを付、p要素にid＝news1Paragraphを付けています。
window.onloadを使って、ページを読み込ませてからJSが発動するようにします。

JavaScript ▼

            var Flg = false;
            
            window.onload = function (){
              para0 = document.getElementById('news0Paragraph');
              para1 = document.getElementById('news1Paragraph');
              para0.style.display = 'none';
              para1.style.display = 'none';
              title0 = document.getElementById('news0Title');
              title1 = document.getElementById('news1Title');
              title0.onclick = function (){
                if(Flg) {
                  Flg = false;
                  para0.style.display = 'none';
                } else {
                  Flg = true;
                  para0.style.display = 'block';
                }
              }
              title1.onclick = function (){
                if(Flg) {
                  Flg = false;
                  para1.style.display = 'none';
                } else {
                  Flg = true;
                  para1.style.display = 'block';
                }
              }
            }
             
          

HTML ▼

          <h2 id="news1Title" class="pointer">こちらをクリックして下さい。▼</h2>
          <ul id="news1Paragraph">
            <li><a href="#">京都・紅葉</a></li>
            <li><a href="#">京都・清水寺</a></li>
            <li><a href="#">王子動物園</a></li>
            <li><a href="#">六甲山牧場</a></li>
            <li><a href="#">淡路島</a></li>
          </ul>