使用jQuery切换显示/隐藏

Question

( function( $ ) {

var $f = $;

$('.entry-content').hide();

$f(function(){
        $f(".entry-title" ).toggle(
            function() {
                $f(this).parents(".post").children('.entry-content').slideUp('fast');
            },
            function() {
                $f(this).parents(".post").children('.entry-content').slideDown('fast');
            }
        );
});

} )( jQuery );

JSFIDDLE

Pretty basic I guess but, I would like to click on the .entry-title links to display the content with the .entry-content class. However, it seems I have to click on the link two times for the content to expand. Why is this and how can this be fixed? Not sure what I am doing wrong here.

Also, is there a way to close the previously opened div when another one opens? Sort of like an accordion.

Answer 1

Use slideToggle() for toggle between them.

toggle event was deprecated in jQuery 1.8 and removed in jQuery 1.9 .

 var $ele = $('.entry-content').hide(); // hide initially $(".entry-title").click(function(e) { // bind click event handler e.preventDefault(); // prevent default click event handler var $ele1 = $(this).parents(".post").children('.entry-content').slideToggle('fast'); // toggle the animation $ele.not($ele1).slideUp(); // slide up remaining }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="post"> <p class="destaques-data">2010-03-10</p> <h3><a href="#" class="entry-title">Mauris aliquet mattis metus</a></h3> <p>Requerente: <a href="http://localhost:8888/aspp/requerente/ornare/" rel="tag">Ornare</a> <a href="http://localhost:8888/aspp/requerente/pede/" rel="tag">Pede</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/amet/" rel="tag">Amet</a> <a href="http://localhost:8888/aspp/tipologia/elit/" rel="tag">Elit</a> </p> <div class="entry-content"> <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.</p> </div> </div> <div class="post"> <p class="destaques-data">2006-11-08</p> <h3><a href="#" class="entry-title">Cras aliquam massa ullamcorper sapien</a></h3> <p>Requerente: <a href="http://localhost:8888/aspp/requerente/enim/" rel="tag">Enim</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/ipsum/" rel="tag">Ipsum</a> </p> <div class="entry-content"> <p>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p> </div> </div> 

Answer 2

Just change your function like this:

$f(".entry-title" ).toggle(
            function() {
                $f(this).parents(".post").children('.entry-content').slideDown('fast');
            },
            function() {
                $f(this).parents(".post").children('.entry-content').slideUp('fast');
            }
        );

It will work.

Answer 3

This JSFiddle shows working code, it's up to you if you want to add ID's or make use of classes instead or add the code you had (something about parent-child relationship), but this is the basic to make such slide work:

 $(document).ready(function() { $(".entry-content").hide(); $(".entry-title").click(function() { if ($(".entry-content").is(":hidden")) { $(".entry-content").slideDown(); } else { $(".entry-content").slideUp(); } }); return false; /* or e.preventDefault(); */ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="post"> <p class="destaques-data">2010-03-10</p> <h3><a href="#" class="entry-title">Mauris aliquet mattis metus</a></h3> <p>Requerente: <a href="http://localhost:8888/aspp/requerente/ornare/" rel="tag">Ornare</a> <a href="http://localhost:8888/aspp/requerente/pede/" rel="tag">Pede</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/amet/" rel="tag">Amet</a> <a href="http://localhost:8888/aspp/tipologia/elit/" rel="tag">Elit</a> </p> <div class="entry-content"> <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.</p> </div> </div> <div class="post"> <p class="destaques-data">2006-11-08</p> <h3><a href="#" class="entry-title">Cras aliquam massa ullamcorper sapien</a></h3> <p>Requerente: <a href="http://localhost:8888/aspp/requerente/enim/" rel="tag">Enim</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/ipsum/" rel="tag">Ipsum</a> </p> <div class="entry-content"> <p>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p> </div> </div>