How to hide/show elements in AngularJS like JQuery by passing element class to the function?
<p>I searched about my problem, and I could not find my answer and I'm just looking for the solution with the best performance and less code.</p>

<p>I have some drop-down menus and I want to have just one function to show and hide the menus on click on their buttons, by JavaScript or by JQuery this is simple and does not add more codes (atributes) to the HTML elements and it means lighter DOM. </p>

<p>Imagine these are my buttons, actually my links (HTML):</p>

<pre><code>&lt;a class="first-menu" href="#"&gt;First link&lt;/a&gt;
&lt;a class="second-menu" href="#"&gt;Second link&lt;/a&gt;
&lt;a class="third-menu" href="#"&gt;Third link&lt;/a&gt;


&lt;div class="first-menu-div"&gt;This is first MENU&lt;/div&gt;
&lt;div class="second-menu-div"&gt;This is Second MENU&lt;/div&gt;
&lt;div class="third-menu-div"&gt;This is Third MENU&lt;/div&gt;
</code></pre>

<p>And this can be my JQuery:</p>

<pre><code>  $("a").click(function() {
    var class_name = $(this).attr('class');
    $("div").hide();
    $("." + class_name + '-div').show();
  });
</code></pre>

<p>Simple <a href="https://jsfiddle.net/tk6mg3vb/1/" rel="nofollow">JSfiddle demo</a></p>

<p>In this case, by a simple JavaScript (JQuery) code we can hide all menus and show the menu we need according to the class of the clicked link. We did not added attributes just for showing or hiding the menu by clicking a certain link, and we can simply expend the program by adding menu or link or even changing function.</p>

<p>Now I want to know how we can have something like this function in Angular and with Angular's standards. For example I can do this by these codes:</p>

<pre><code>&lt;a ng-click="showHideMenu('menu1')"&gt;Show menu 1 &lt;/a&gt;
&lt;a ng-click="showHideMenu('menu2')"&gt;Show menu 2 &lt;/a&gt;
</code></pre>

<p>And here may be the controller:</p>

<pre><code>$scope.OpenHeaderMenu= function(elementClass){
                $(".menus &gt; div").hide();
                $(elementClass).show()
                 //Just imagine Angular also has hide() and show() OR A way to use variable to set ng-show and ng-hide to the elements we want
            };
</code></pre>

<p>Is there any way to do this by Angular like JQuery and get the rid of <code>ng-show</code> and <code>ng-hide</code> and use functional programming instead of adding attributes and lots of <code>if | else</code> to controller to hide or show simple menus?</p>

<p>I want to have these menus lots of time in my pages and I prefer to have a simple function to call and having less code and better performance.</p>

<p>I hope my question be clear</p>