Toggle in a div next to (or below)

Question

I need to manipulate a div from the click on another div.

Basically, one is on top of the other, I want to click the top one and so the bottom one runs the event .toggled(). But one cannot be inside the other.

HTML

<div id="titulo" class=" toggled " align="left">Histórico</div>
<br>
<div id="divTabela">
    <table id="tabelainfo" name="tabelainfo" class=" bordasimples ">
    <thead>
    <tr id="titulotabela">
        <th>Data</th>
    </thead>
    <tbody>
    <tr id="corpotabela">
        <td align="center">15/5/2014 </td></tr>
    <tr id="corpotabelaalt" align="center">
        <td align="center">16/5/2014 10:56:10</td></tr>
    <tr id="corpotabela">
        <td align="center">16/5/2014 11:00:28</td></tr>
    </tbody>
    </table>
<br><br></div>

Javascript

$("*").on("click", ".toggled", function(event){
    event.preventDefault();
    event.stopPropagation();

    console.log($(this));
    $(this).css({"color":"red","border":"2px solid red"});
    $(this).next("div").toggle();
});

Jsfiddle

What you suggest to me?

Answer 1

$('#elemento-de-clicar').click(function(){
    $('#elemento-alvo').slideToggle();
 });

Answer 2

<!-- HTML -->    
<p class="linkToggle">
   <strong><span>[+] </span>Detalhamento dos Pacotes de Serviços</strong>
</p>
<div class="lista forToggle">
    olá mundo!
</div>
<!-- HTML -->


<script>
       $('.linkToggle').click(function () {
             $(this).next(".forToggle").toggle('slow', function () { });
             var val = $(this).html();
             if (val.indexOf("[+]") > -1)
                  $(this).html(val.replace("[+]", "[-]"));
             else
                  $(this).html(val.replace("[-]", "[+]"));
        });
</script>