ver o slideToggle. </div> <div id="conteudo2" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> <!-- Efeito fadeToggle Rapido --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao3" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Efeito fadeToggle rapido. </div> <div id="conteudo3" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> <!-- Efeito slideToggle Rapido // Ja foi mostrado no blog --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao4" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Efeito slideToggle rapido. </div> <div id="conteudo4" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> <!-- Efeito fadeToggle Rollover --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao5" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Efeito fadeToggle Rollover(mouseover). </div> <div id="conteudo5" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> <!-- Efeito slideToggle Rollover // Ja foi mostrado no blog --> <div style="margin: 10px 5px; padding: 5px; border: 2px solid #CCC; float: left; width: 250px;"> <div id="botao6" style="background-color: #21759B; padding: 2px; float: left; color: #FFF; cursor: pointer; width: 98%; text-align: center;"> Efeito slideToggle Rollover(mouseover). </div> <div id="conteudo6" style="float: left; margin-top: 5px;"> Morbi fermentum pretium dictum. Nulla hendrerit facilisis dui? Aliquam erat volutpat. Donec luctus ornare leo, at condimentum augue vulputate non? Pellentesque eget diam in erat volutpat pulvinar in quis odio. Nam rhoncus purus nec ante suscipit tempor. Vestibulum sagittis fermentum dui; id venenatis ante laoreet ac. </div> </div> </body></html>Espero que gostem e facam um belo uso.Demo: Aqui