Within ASP.Net MVC, how do I show and hide 3 @Html.ActionLink buttons on click?

Question

Within ASP.Net MVC, how do I show and hide 3 @Html.ActionLink buttons on click?

Basically, I'm trying to code the mobile-side of a website but my webpage 6 @Html.ActionLink Buttons and I don't want these buttons to fill the entire page so what I'm wanting is for when the webpage detects that a mobile is viewing the website ( @media screen and (max-width: 480px) ) the last 3 buttons are hidden and a button called more will appear.

This new button on click will reveal the last 3 buttons and when clicked again will hide them.

I've not done this before, but my attempt is below:

 $(function() { $("#more").on('click', function() { var buttons = document.getElementById('Extra'); var isHidden = buttons.style.display == 'none'; buttons.style.display = isHidden ? 'block' : 'none'; }); }); 

 #more { visibility: hidden; } @media screen and (max-width: 480px) { #more { visibility: visible; } nav li:nth-of-type(5) { display: none; } nav li:nth-of-type(6) { display: none; } nav li:nth-of-type(7) { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu" class="center"> <nav> <ul id="menu"> <li>@Html.ActionLink("Page1", "Page1", "Home")</li> <li>@Html.ActionLink("Page2", "Page2", "Home")</li> <li>@Html.ActionLink("Page3", "Page3", "Home")</li> <li id="more">@Html.ActionLink("More", null, null, new { @id = "more" })</li> <li id="Extra">@Html.ActionLink("Page4", "Page4", "Home")</li> <li id="Extra">@Html.ActionLink("Page5", "Page5", "Home")</li> <li id="Extra">@Html.ActionLink("Page6", "Page6", "Home")</li> </ul> </nav> </div> 

Answer 1

  <script type="text/javascript"> $(document).ready(function() { $("#more").click(function(){ $(".Extra").toggle(); }); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu" class="center"> <nav> <ul id="menu"> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> <li id="more"><a href="#">More</a></li> <li class="Extra" style="display:none"><a href="#">Page 4</a></li> <li class="Extra" style="display:none"><a href="#">Page 5</a></li> <li class="Extra" style="display:none"><a href="#">Page 6</a></li> </ul> </nav> </div>