CSS-Javascript: Показать и спрятать div

Question

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

Title 1 <a href="#" onclick="showdiv()">View More</a> 
<div id="title1_div"> 
Some Information 
</div> 

<style> 
#title1_div{ 
display:none; 
} 
</style> 

<script> 
function showdiv() 
{ 
document.getElementById('title1_div').style.display = 'block'; 
} 
</script> 

Это обеспечивает только разделение по щелчку. Как я могу закрыть этот div при нажатии.

Любая помощь будет оценена по достоинству.

Пожалуйста, смотрите этот пример в JSFiddle: https://jsfiddle.net/eo4cysec/

Answer 1

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

if(document.getElementById('title1').style.display == 'block') { 
    document.getElementById('title1').style.display = 'none'; 
} else { 
    document.getElementById('title1').style.display = 'block'; 
} 

Чтобы установить текст View Less вам нужна ссылка в щелкнул тега, вы передать его в качестве параметра, как это:

<a href="#" onclick="showdiv(this)">View More</a> 

Тогда у вас есть возможность использовать этот параметр и установите для него innerHTML, который представляет собой текст, который отображается. Таким образом, последняя функция будет выглядеть следующим образом, где e теперь ссылка на a в тег:

function showdiv(e) { 
    if(document.getElementById('title1').style.display == 'block') { 
    e.innerHTML = 'View More'; 
    document.getElementById('title1').style.display = 'none'; 
    } else { 
    e.innerHTML = 'View Less'; 
    document.getElementById('title1').style.display = 'block'; 
    } 
} 

Пожалуйста, проверьте эту скрипку:

https://jsfiddle.net/g7ry88h7/

Answer 2

$('a').click(function() { 
    $(this).next('div').stop(true, true).slideToggle("fast"); 

if($(this).html() == 'View More'){ 
     $(this).html('View Less'); 
    } else { 
     $(this).html('View More'); 
    } 
}), 

Answer 3

Простая функция. Назовите его по щелчку, и он обработает скрытие/шоу:

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 

Answer 4

Вот рабочий пример.

function showdiv(el) { 
 
    if (el.innerHTML == "View More") { 
 
    document.getElementById('title1').style.display = 'block'; 
 
    el.innerHTML = "Show Less"; 
 
    } else { 
 
    document.getElementById('title1').style.display = 'none'; 
 
    el.innerHTML = "View More"; 
 
    } 
 
}

#title1 { 
 
    display: none; 
 
}

Title 1 
 
<div id="title1"> 
 
    Some Information 
 
</div> 
 
<a href="#" onclick="showdiv(this)">View More</a>