Добавление большего или меньшего +/-

Question

Я пытаюсь настроить этот код, который работает для отображения более или менее всего в панели panel_menu для отображения + или - текста рядом с кнопкой меню, но я не понимаю, как сделать это в jQuery. Примеры, которые я видел, не похожи на то, что у меня есть.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
    $("#toggle_menu").click(function(){ 
    $("#panel_menu").slideToggle(0); 
    }); 
    }); 
</script> 

<style> 
    h3 { padding: 5px; cursor: pointer; margin: 0px; } 
    h3:hover { color: #ff0000; background: #eee; } 
    #toggle,#toggle_menu { padding: 5px; } 
    #panel_menu { margin: 0px; display:none; padding: 5px; } 
</style> 

<h3 id="toggle_menu">Menu </h3> 
<div id="panel_menu"> 
Lorem ipsum dolor sit amet 
</div> 

Как нажимать на «Меню», выдает или скрывает текст правильно. Как добавить функцию, чтобы она показывала +/- или что-то подобное, как больше/меньше, чтобы понять посетителя?

Answer 1

Простой способ для достижения этой цели является инициализация «Меню» на «+ меню» следующим образом:

<h3 id="toggle_menu">+ Menu </h3> 

... 

$(document).ready(function() { 
    var tm = $("#toggle_menu"); 
    tm.on('click', 
    function() { 
     $("#panel_menu").slideToggle(0); 
     if(tm.text() == '- Menu') tm.text('+ Menu') 
     else tm.text('- Menu'); 
    } 
); 
}); 

jsfiddle