Jquery切换（显示1 div在激活切换时隐藏其余部分）

Question

The basic idea is that I have a bunch of div's in which each can be toggled (show/hide). When one div is toggled, I'd like for other div's that are currently being shown to hide, thus only allowing one single div to be shown at a time.

It shows user bio's in Wordpress, when opened only 1 bio should be expanded not all bio's. My current code expands all bio's when using the toggle function:

<?php
$category_text = get_the_hrb_user_bio($user);

if (strlen($category_text) > $max_lenght) { ?>
    <div class="info short">
        <?php echo substr($category_text, 0, 350) . "..."; ?>
        <br/>
        <a href="javascript:void(0)" class="r_more">Read More..</a>
    </div>

    <div class="info long" style="display:none;">
        <?php echo $category_text; ?>
        <br/>
        <a href="javascript:void(0)" class="r_less">Read less..</a>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('.r_more').click(function () {
                $('.short').hide();
                $('.long').show();
            });
            $('.r_less').click(function () {
                $('.long').hide();
                $('.short').show();
            })
        });
    </script>

<?php } else { ?>
    <div class="info short">
        <?php echo the_hrb_user_bio($user); ?>
    </div>
<?php } ?>

Answer 1

Your code $('.short').hide(); or $('.long').show(); is hiding or showing all divs that have attribute class="short" or class="long" respectively. Here is the solition:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.r_more').click(function() {
            $('.short').show(); //shows all short infos
            $('.long').hide(); //hide all full infos
            var parent = $(this).parent();
            parent.hide(); //shows only one block
            parent.next().show(); //shows only one block
        });
        $('.r_less').click(function() {
            $('.short').show(); //shows all short infos
            $('.long').hide(); //hide all full infos
        });
    });
</script>

or, a little bit optimized

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var allShorts = $('.short');
        var allLongs = $('.long');
        $('.r_more').click(function() {
            allShorts.show(); //shows all short infos
            allLongs.hide(); //hide all full infos
            var parent = $(this).parent();
            parent.hide(); //hides only one block
            parent.next().show(); //shows only one block
        });
        $('.r_less').click(function() {
            // we don't need this, as at this moment all long infos
            // should be hided, except one block
            // allLongs.hide(); //hide all full infos
            // allShorts.show(); //shows all short infos
            var parent = $(this).parent();
            parent.hide(); //hides only one block
            parent.prev().show(); //shows only one block
        });
    });
</script>