CODEWITHSUNDEEP
javascriptjqueryhtml
JordanBarber
JordanBarber

Reputation: 2101

jQuery close ul if other is opened

Need some help here. I have the following html/javascript

<div class="quick-links block">
        <div class="main-wrap container">
            <div class="row">
                <div class="col-sm-4 first column">
                    <div class="inner-content">
                        <h2>Admissions<a><img src="/sites/all/themes/merge/img/blue-down.png" /></a></h2>
                        <ul>
                            <li><a>Apply Now</a></li>
                            <li><a>Schedule a Visit</a></li>
                            <li><a>Student Life</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 second column">
                    <div class="inner-content">
                        <h2>Academics<a><img src="/sites/all/themes/merge/img/green-down.png" /></a></h2>
                        <ul>
                            <li><a>A Liberal Arts Degree</a></li>
                            <li><a>College of Arts &amp; Sciences</a></li>
                            <li><a>College of Business</a></li>
                            <li><a>College of Education</a></li>
                            <li><a>College of Health Sciences</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 third column">
                    <div class="inner-content">
                        <h2>Student Life<a><img src="/sites/all/themes/merge/img/gold-down.png" /></a></h2>
                        <ul>
                            <li><a>Campus Photo Tour</a></li>
                            <li><a>Student Organizations</a></li>
                            <li><a>Residence Life</a></li>
                            <li><a>Facilities</a></li>
                            <li><a>Food &amp; Drink</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </div><!--end quick-links-->

    <!-- ================================================ -->
    <!-- === QUICK LINKS JAVASCRIPT === -->
    <!-- ================================================ -->

    <script>

        var quickSection = $('.quick-links');
        var quickContent = $('.quick-links .row .inner-content')
        var quickList = $('.quick-links .row .inner-content ul');

        if ( quickSection.is('*') ) {

            quickContent.find("img").click(function() {
                $(this).closest(".inner-content").find("ul").slideToggle("slow");
                $(this).toggleClass("flipped");
            });
        }

    </script>

I need to close the displayed ul if another 'found' img is clicked. Basically just need to close the current ul if another is opened. Any help is greatly appreciated.

Upvotes: 0

Views: 1271

Answers (2)

Dhiraj
Dhiraj

Reputation: 33628

You can also do something like this 

quickContent.find("img").click(function() {
  $(this).closest(".main-wrap").find("ul").slideUp("slow"); // close all other
  $(this).closest(".column").find("ul").slideDown("slow"); // open current 
});

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92983

Try this:

$(this).closest(".inner-content").find("ul").slideToggle("slow")
       .closest(".column").siblings().find("ul").slideUp("slow");

http://api.jquery.com/siblings

Upvotes: 1

Related Questions