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'; 
} 

あなたは、このようなパラメータとして渡し、クリックされたタグの参照が必要になります。

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

その後、このパラメータを使用する機会を持っているし、表示されるテキストであるinnerHTMLを設定します。だから、最後の関数はeが今a -tagの参照である場合には、次のようになります。

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>