How Can I Go To Href On Tag With Hide Attribute Value?

How can I go to href on tag with hide attribute value? here is my navigation bar When loading the page here, p10 to p21 are hidden. In this situation, if you click from 10 to 21 o

Solution 1:

The jquery-selector is used in this way:

$('#<id>').hide(); 

-> the <id> (after the #) must be the id of the element. In your HTML it is the given href. In your given code the #hideshow button is missing.

Solution 2:

You try to select with jQuery IDs (10 - 21) but the HTML doesn't contain these IDs. Furthermore: The click event listener is assigned to the button #hideshow which doesn't exist.

If you define the IDs and add the button #hideshow it works:

$(function() {
  $('#p10').hide();
  $('#p11').hide();
  $('#p12').hide();
  $('#p13').hide();
  $('#p14').hide();
  $('#p15').hide();
  $('#p16').hide();
  $('#p17').hide();
  $('#p18').hide();
  $('#p19').hide();
  $('#p20').hide();
  $('#p21').hide();

  $('#hideshow').click(function() {
    $('#p10').toggle();
    $('#p11').toggle();
    $('#p12').toggle();
    $('#p13').toggle();
    $('#p14').toggle();
    $('#p15').toggle();
    $('#p16').toggle();
    $('#p17').toggle();
    $('#p18').toggle();
    $('#p19').toggle();
    $('#p20').toggle();
    $('#p21').toggle();
  });

  $('#navbarNav').click(function() {
    console.log($(this));
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link "href="#section2">Home</a></li><liid="1p17"class="nav-item"><aclass="nav-link"href="#p1">Subway congestion prediction app</a></li><liid="p2"class="nav-item"><aclass="nav-link"href="#p2">Image classification</a></li><liid="p3"class="nav-item"><aclass="nav-link"href="#p3">Community site</a></li>
...
<buttontype="button"id="hideshow">Want to see more?</button>
...
    <liid="p17"class="nav-item"><aclass="nav-link"href="#p17">Assembly</a></li><liid="p18"class="nav-item"><aclass="nav-link"href="#p18">Data structure</a></li><liid="p19"class="nav-item"><aclass="nav-link"href="#p19">Concave</a></li><liid="p20"class="nav-item"><aclass="nav-link"href="#p20">Contract</a></li><liclass="nav-item"><aclass="nav-link"href="#section5">Contact</a></li></ul></div>