Abrir div abaixo de outra div com jquery

[Eduardo Kalsing 0]

Boa noite!

Tenho 3 divs, que quero que fiquem lado a lado e ao clicar em uma delas, abra um conteúdo abaixo dessa que cliquei. Do jeito que fiz, as divs até ficam lado a lado, mas ao clicar em uma, o conteúdo não abre abaixo, mas sim do lado ou abaixo de outra div.

Código:

<div style="float: left;">
                	<a href="#" id="toggle1">
                    	<img src="imgs/direito-previdenciario.png" title="Direito Previdenciário" alt="Direito Previdenciário" class="previdenciario"/>
                    </a>
                </div>
                
				<div class="toggle1">
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Aposentadorias</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Pensão por Morte</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Auxílio Doença</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Auxílio Acidente</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Revisão de Benefício</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Benefício Assistencial (Idoso/Deficiente/Dependente Químico</p>
                </div>
                <div style="float: left;">
                	<a href="#" id="toggle2">
                    	<img src="imgs/direito-trabalhista.png" title="Direito Trabalhista" alt="Direito Trabalhista" class="previdenciario"/>
                    </a>
               	</div>
				<div class="toggle2">
                	<p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Indenizações</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Acidente de Trabalho</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Horas Extras</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Periculosidade</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Insalubridade</p>
                </div>
            	<div style="float: left;">
                	<a href="#" id="toggle3">
                    	<img src="imgs/direito-civel.png" title="Direito Cível" alt="Direito Cível" class="previdenciario"/>
                    </a>
                </div>
				<div class="toggle3">
                	<p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Indenizações</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> DPVAT</p>
                    <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Inscrição SPC/SERASA</p>
                </div>

 

javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle3').click(function() {
	$('.toggle3').toggle('slow');
	return false;
});
        });

$(function() {
$('#toggle2').click(function() {
	$('.toggle2').toggle('slow');
	return false;
});
        });

$(function() {
$('#toggle1').click(function() {
	$('.toggle1').toggle('slow');
	return false;
});
        });
</script>

 

CSS:

#toggle1, #toggle2, #toggle3{
	width: 190px;	
	float: none !important;
}
.toggle1, .toggle2, .toggle3{
	display: none;	
	float: float !important;
	width: 190px;
	border: 1px solid green;
}

 

 

[Flavio05 1]

Por que tu usas tantas imagens neste menu? Estás otimizando elas pelo menos?

Por que tu não usas listas para estruturar este menu ao invés de parágrafos e imagens?

Ou, por que em cada submenu tu não usas pelo menos um objeto ul para agrupá-los?

 

Enfim...

Para que os submenus apareçam abaixo, experimente colocá-los dentro de cada item do menu correspondente.

Por exemplo, ao invés disso:

<div style="float: left;">
            <a href="#" id="toggle1">
                <img src="imgs/direito-previdenciario.png" title="Direito Previdenciário" alt="Direito Previdenciário" class="previdenciario"/>
            </a>
        </div>
                
        <div class="toggle1">
            <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Aposentadorias</p>
            <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Pensão por Morte</p>
            <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Auxílio Doença</p>
        </div>

Faça isso:

<div style="float:left;">
            <a href="#" id="toggle1">
                <img src="imgs/direito-previdenciario.png" title="Direito Previdenciário" alt="Direito Previdenciário" class="previdenciario"/>
            </a>
            
            <div class="toggle1">
                <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Aposentadorias</p>
                <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Pensão por Morte</p>
                <p><img src="imgs/seta.png" class="seta" title="Seta" alt="Seta"/> Auxílio Doença</p>
            </div>
        </div>