anzeigen div geklickt einmal einen Link und ausgeblendet, wenn wieder den gleichen Link geklickt

Question

<div class="col-md-10 col-sm-12 col-xs-12"> 
    <span>Show categories</span> 
</div> 
<div class="content"></div> 

Wenn ich die oben „Kategorien anzeigen“ klicken, soll es die Content-Klasse div angezeigt und zugleich das Kategorien anzeigen Wort sollte zu wechseln Kategorien ausblenden .Wenn ich wieder auf die Hide Kategorien klicken, sollte es die div verstecken und wieder sollte das Wort zu wechseln Show Kategorie.

Wie kann ich es einfach ohne Bootstrap-Kollaps erreichen?

Answer 1

Versuchen Sie diesen Code:

var flag = true; 
 
$('#dd').click(function() { 
 
    //This 
 
    $('.content').toggle(); 
 
    $('#dd').html(flag == false ? "Hide categories" : 'Show categories') 
 
    flag = !flag; 
 
    //OR this 
 
    $(".content").css("display", flag ? "block" : "none"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-10 col-sm-12 col-xs-12"> 
 
    <span id="dd">Hide categories</span> 
 
</div> 
 
<div class="content"><h2>Some title here</h2>Something happening here!</div>

Answer 2

Es kann mit der Methode jquery toggle() erreicht werden.

$('#cate').click(function(){ 
 
    $('.content').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-10 col-sm-12 col-xs-12"> 
 
    <span id="cate">Show categories</span> 
 
</div> 
 
<div class="content">Hello</div>

Answer 3

Ohne jQuery:

var s = document.getElementById('switchme'); 
 
var c = document.getElementById('content'); 
 
c.style.display = 'none'; 
 

 
s.addEventListener('click', function(e) { 
 
    [c.style.display, e.target.textContent] = (c.style.display === 'none') // check visibility 
 
    ? ['block', 'Hide categories'] 
 
    : ['none', 'Show categories']; 
 
})

<div class="col-md-10 col-sm-12 col-xs-12"> 
 
    <span id="switchme">Show categories</span> 
 
</div> 
 
<div class="content" id="content">Content</div>