Дисплей JavaScript и скрыть элемент div

Question

Я новичок в JavaScript, и у меня в настоящее время есть статья, которая выходит из базы данных, в статье есть два ряда. Название & Содержание Есть около 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() скрывает div на основе идентификатора, пропускаемого через параметр. Но единственной проблемой в том, что мне нужны другие ранее отображаемые Divs для Truntate, когда открывается новый.

Значение

содержимое должно быть видно только один раз, затем при нажатии на другое название ранее открытое содержимое должно исчезнуть, и следует появиться только новый контент.

Я надеюсь, что именно имеет смысл. Поскольку мне не хватает грамматики, чтобы объяснить все это. Я пытался отдать небольшой пример здесь, что по какой-то причине, похоже, вообще не работает, но делает в моем 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
}

.

Имейте в виду, что это решение начинается без видимых элементов, и после этого только позволяет одному элементу быть видимым одновременно.

Answer 2

Вы должны попробовать это:

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

.

Я вижу также, что у вас будет несколько элементов с id=title, вы должны изменить его, чтобы сделать каждый элемент уникальным.

Answer 3

Вы можете пройти все элементы с помощью onClick «ShowContent», скрыть их все, впоследствии вы можете просто показать то, что вы хотите.

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 самому себе, но одна из вещей, которые мы только что сделали в классе, я делаю, был аккордеонным дисплеем, где вы прикрепляете обработчики событий в документе.Объекты заголовка и их дети DIV, и это было сделано путем замены классов CSS на событиях кликов ... Вы используете CSS?В нашей версии, в любое время мы нажали на плюс, он расширит дисплей для отображения подразделений ниже и нажав на минус PIC, он закроет их ... наши это сделали для всех, но вы должны быть в состоянии кодировать, чтоДаже на «закрыть» все эти дисплеи, а затем открыть / отображать только Divs, которые являются детьми для элемента, щелкнувшись ... это то, что вы ищете?