JavaScriptディスプレイと非表示の要素を表示します

Question

私はJavaScriptに新しく、現在データベースから取り出されている記事を持っています、記事には2行があります。 タイトル＆コンテンツ私のデータベースにはこれらのうち約100があります。これで、目的は最初にすべてのタイトルをリストし、ユーザーがタイトルをクリックすると、関連コンテンツがその下に表示されます。私はこれをすることができますしかしこれはこのようにしています。

<?php
//mysql query here...
foreach($result as $row) { ?>
<div id='title'> <?= $row['title'] ?> </div>
<div id='<?= $row['id'] ?>' style='display:none' 
             onclick=showContent(<?= $row['id'] ?>) > <?= $row['content'] ?> 
</div>
<?php } ?>

.

コンテンツの表示を非表示にするJavaScript：

<script type='text/javascript'>
function showContent(id){
    document.getElementById(id).style.display='inline';
}
</script>

.

showContent()関数は、議会議員を通過したIDに基づいてDIVを隠します。 しかし、唯一の問題は、新しいものが開いたときに発売される他の以前に表示されたDIVを実行する必要があります。

意味、コンテンツは一度だけ表示されるべきであり、次に別のタイトルをクリックすると、以前に開いたコンテンツが消え、新しいコンテンツのみが表示されます。

私はそれが理にかなったことを願っています。私はそれをすべて説明するために文法を欠いているように。ここでは、ここではまったく機能していないようですが、私のlocalhost http：/ /jsfiddle.net/yl6ah/

---

編集：

私の完全なPHPループ、一緒にすべてのJS / HTML

    <?php 
            $articlesForPreview = $createQuery
                ->query("SELECT * FROM timeline");              
                $fetchAll = $articlesForPreview->fetchAll(PDO::FETCH_ASSOC);    
                foreach($fetchAll as $row) {?>
                <div id='timeline_container'>
                <span class='timeline_date'> <?= $row['time'] ?></span>
                <span class='timeline_title'> <a href='#' onclick=timeline(<?= $row['id'] ?>)><?= $row['title'] ?></a></span>
                <p id='<?= $row['id'] ?>' style='display:none;'> <?= $row['event'] ?></a></span>
            </div>

            <?php }?>



    </aside>
</section>

<script type='text/javascript'>
function timeline(id){
    document.getElementById(id).style.display='inline';
}
</script>

<footer id='footer_container'> 

.

Answer 1

表示されている最後の項目を単純に覚えています。

var active;
function showContent(id){
    if (active) active.style.display = 'none'; // hide previously visible element
    active = document.getElementById(id);    // keep track of the element you are about to show
    active.style.display='inline'; // show the new element
}

.

このソリューションは表示されないアイテムなしで始まり、その後、1つの項目のみが一度に表示されるだけです。

Answer 2

これを試すべきです：

function showContent(id){
    $('.active').hide().removeClass('active');
    $('#'+id).show().addClass('active');
}

.

id=titleを持つ複数の要素を持つこともわかります。

Answer 3

「ShowContent」のonClickを使用してすべての要素を通過することができます。その後、あなたが望むものを見せることができるだけです。

function showContent(id){
    var allElements = document.getElementsByTagName('*');
    for ( var i = 0; i<allElements.length; i++ ) {    
        if ( (allElements[i].onclick + "").indexOf("showContent") >= 0) {
            allElements[i].style.display = "none";       
        }
    }
    document.getElementById(id).style.display='inline';
}

.

Answer 4

私はJavaScriptとjQueryの自分自身にかなり新しいことがありますが、私たちが撮っているクラスで行ったことの1つは、Clickイベントのためにイベントハンドラを添付しているアコーディオンディスプレイでした。ヘッダーオブジェクト、およびDIV子の要素、そしてクリックイベントのCSSクラスを交換することによって行われました... CSSを使用していますか。私たちのバージョンではいつでもプラスをクリックしたときに、それは以下のdivを表示し、それがそれらを閉じるのをクリックするでしょう...私たちのものはそれらすべてのためにそれをコーディングすることができるはずです。これらのディスプレイのすべてを「閉じる」してから、アイテムのための子供のためのDIVのみを開く/表示されていても...は、あなたが探しているものです。