studio-benkei

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

JavaScript ▼

            $(function (){
              para1 = document.getElementById('news1Paragraph');
              para2 = document.getElementById('news2Paragraph');
              para1.style.display = 'none';
              para2.style.display = 'none';
            $("#news1Title").click(function(){
              $("#news1Paragraph").toggle();
            });
            $("#news2Title").click(function(){
              $("#news2Paragraph").toggle();
            });
            });
            
          

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>