CODEWITHSUNDEEP
javascriptjquery
zacwhyyy
zacwhyyy

Reputation: 13

Close other opened div when toggle one of the div

I have multiple buttons with .expandable-container-mobile class.

When I toggle on the buttons it will expand.

Currently when I open another div, the previous opened div won't close, but I am trying to close the other section, below is my code:

$( ".expandable-container-mobile").click(function() {
    $(this).children('.mobile-show-section').stop().slideToggle(700);
    $(this).not.('.mobile-show-section').stop().slideUp();
});

html code below: the php code will generate the row and button: 

<div class="expandable-container-mobile">
                        <div class="expandable" id="<?php echo strtolower($actual_post_title); ?>-expandable">
                            <div class="activator">
                                <div class="section-title" id="<?php echo strtolower($actual_post_title); ?>"><?php echo $actual_post_title; ?></div>
                            </div>
                        </div>
                        <div class="mobile-show-section">
                            <?php                        
                                $args = array(
                                    'sort_order' => 'asc',
                                    'sort_column' => 'post_date',
                                    'child_of' => $id
                                ); 

                                $children = get_pages($args);

                                $children_ids = array();
                                if ( ! empty( $children ) )
                                    foreach ( $children as $post )
                                        $children_ids[] = $post->ID;

                                $arrlength = count($children_ids);

                                for($x = 0; $x < $arrlength; $x++) {
                                ?>
                                    <a href="<?php echo get_permalink($children_ids[$x]); ?>"><?php echo get_the_title($children_ids[$x]); ?> </a>
                                <?php                                              
                                }    
                            ?>
                        </div>
                    </div>

Upvotes: 1

Views: 46

Answers (1)

madalinivascu
madalinivascu

Reputation: 32364

Your code toggles all the children a the second line will slideUp the .expandable-container-mobile that is not .mobile-show-section

Try something like:

var el = $(this).find('.mobile-show-section');//get the current element
el.stop().slideToggle(700);//toggle the current one 
$('.mobile-show-section').not(el).stop().slideUp();//hide the rest

Upvotes: 1

Related Questions