Tree based navigation, toggle only the clicked element Jquery
<p>I have this kind of vertical menu :-</p>

<pre><code>Europe
 France
  Paris
 Germany
  Berlin

Asia
 India
  New Delhi
  Lucknow
 Bangladesh
  Dhaka
</code></pre>

<p>What I want to achieve is that if I click on Asia only the elements inside asia should open i.e. only the countries in Asia (not the cities right now) and when I click on the country only the cities of that country should open.</p>

<p>My Jquery looks like this :- </p>

<pre><code>$(document).ready(function(){
     $('.country_name').hide();
     $('.city_name').hide();
     $('.continent_name').click(function(){

        $('.country_name').toggle(); 

        $('.city_name').hide();
     });

     $('.country_name').click(function(){

        $('.city_name').toggle();
     });
});
</code></pre>

<p>As you can see it toggles all the elements. How do I go about getting the desired result. I did the search on SO and tried few of the answers but it seems they don't work in my case.</p>

<p><strong>Update :-</strong> </p>

<p>Here is the html code (it is in haml)</p>

<pre><code>- @destinations.group_by(&amp;:continent).each do |continent, ds_per_continent|
                %ul(class = "continent_name")
                    %li=link_to continent, "#"
                - ds_per_continent.group_by(&amp;:country).each do |country, ds_per_country|
                    %ul(class = "country_name")
                        %li=link_to country, "#"
                    - ds_per_country.each do |destination|
                        %ul(class = "city_name")
                            %li=link_to destination.name, destination_path(destination)
</code></pre>
