How to change ul list items from another onclick with jQuery?

Question

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>

Answer 1

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="#"

Answer 2

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!

Answer 3

  $('#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> 

Answer 4

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> 

Answer 5

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">

Answer 6

 $('#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> 

Answer 7

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>