如何使用jQuery从另一个onclick更改ul列表项？

I'm starting to study jQuery.

I'm trying to show my second list of items in same place where the first list of items is, when i click in "show more links", but I'm not having success.

Can anyone give some help?

      <ul id="showfirst">
         <h1>Links</h1>
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="# id="next">show more links </a></li>
      </ul>

      <ul id="showsecond">
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
         <li><a href="#">Link 7</a></li>
         <li><a href="#">Link 8</a></li>
         <li><a href="#">+ links</a></li>
      </ul>

   </section>

JavaScript:

<script type="text/javascript">
    $('#next).click(function{

    $('#showsecond').show();

});
</script>

There is missing () and havn't closed string '#next':

$('#next).click(function{ should be $('#next').click(function() {

and unclosed quotes:

<li><a href="#> should be <li><a href="#"

Here is a working example:

$(function() {
  $('#next').click(function() {

    $('#showsecond').show();

  });
});

#showsecond {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
  <h1>Links</h1>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li>
    <a href="#" id="next">show more links </a> </li>
</ul>

<ul id="showsecond">
  <li><a href="# ">Link 5</a></li>
  <li><a href="# ">Link 6</a></li>
  <li><a href="# ">Link 7</a></li>
  <li><a href="# ">Link 8</a></li>
  <li><a href="# ">+ links</a></li>
</ul>

You have to specify for the 2nd list to be hidden at first. Then you had a couple of mistakes (missing closing quote on 2 places, missing () after the function on your click event). And also you need to wrap your jquery code inside a document.ready() or in my code $(function(){}) in order to prevent race conditions.

Hope this helps!

</div>

You have to check that you close your strings. There were some unterminated strings.

 $('#next').click(function(){
    $('#showfirst').hide();
    $('#showsecond').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
     <h1>Links</h1>
     <ul id="showfirst">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="#" id="next">show more links</a></li>
      </ul>

      <ul id="showsecond" style="display:none;">
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
         <li><a href="#">Link 7</a></li>
         <li><a href="#">Link 8</a></li>
         <li><a href="#">+ links</a></li>
      </ul>

</section>

</div>

Three issues:

One href="# attribute is missing a closing double quote
The function expression is missing parentheses. Should be function () {
The selector $('#next) is missing a closing quote.

It helps to look at the console once in a while.

If you want the second list to be initially hidden then add an attribute to the HTML:

<ul id="showsecond" style="display:none">

var listItems = $("#showsecond li"); this statement will retrieve all the li tag elements then we trace these elements and append each those elements into the first list using append() function. $('#showfirst').append(product);

 $('#showsecond').hide();
 $("#next").click(function(){
  var listItems = $("#showsecond li");
  listItems.each(function(idx, li) {
    var product = $(li);
    $('#showfirst').append(product);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
         <h1>Links</h1>
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="#" id="next">show more links </a></li>
      </ul>

      <ul id="showsecond">
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
         <li><a href="#">Link 7</a></li>
         <li><a href="#">Link 8</a></li>
         <li><a href="#">+ links</a></li>
      </ul>

   </section>

</div>

$('#showsecond').hide();
$('#next').click(function(){
  $('#showsecond').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
  <h1>Links</h1>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#" id="next">show more links </a></li>
</ul>

<ul id="showsecond">
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">+ links</a></li>
</ul>

</div>

 $('#showsecond').hide();
 $("#next").click(function(){
 $("#next").closest('li').remove();
  var listItems = $("#showsecond li");
  listItems.each(function(idx, li) {
    var product = $(li);
    $('#showfirst').append(product);
  });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
         <h1>Links</h1>
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
         <li><a href="#" id="next">show more links </a></li>
      </ul>

      <ul id="showsecond">
         <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
         <li><a href="#">Link 7</a></li>
         <li><a href="#">Link 8</a></li>
         <li><a href="#">+ links</a></li>
      </ul>

   </section>

</div>