0

This is similar to this question: Jquery, hide & show list items after nth item

I would like to hide any listed items after the 3rd list item and append a "show more link" The link show more link has to direct to Show More... so that it will link to the correct product detail page.

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

Here is the script I am using:

$('ul')
 .find('li:gt(2)')
 .hide()
 .end()
 .append(
 $('<li><a href="javascript:Detail('2163230');">Show More...</a></li>').click( function(){
  $(this).siblings(':hidden').show().end().remove();
 })
);

Here is a link to a fiddle where the url has been replaced with a link to google instead: http://jsfiddle.net/jelane20/ecbwue8z/

Is there anyway to use javascript:Detail('2163230'); for the URL?

Community
  • 1
  • 1
Jenny
  • 781
  • 1
  • 9
  • 24

1 Answers1

1

I'm not sure what you are trying to do but here's what you need to do :

http://jsfiddle.net/ecbwue8z/2/

Explaination : Single quotes in href would not work if you trying to call a js function. You would need to escape the characters.

<a href="javascript:Detail("\2163230"\);">

EDIT : Here's the new solution :

   <script type="text/javascript">
    $('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
  $('<br /><a href="?2163230");"">Show More...</a>').click(function () {
      $(this).siblings(':hidden').show().end().remove();
      Detail($(this).attr("href").substring(1,$(this).attr("href").length));
  })
 );

    function Detail(id) {
        window.location.href = "http://www.google.com?id=" + id;
    }

</script>
DinoMyte
  • 8,737
  • 1
  • 19
  • 26
  • 4
    Post your code in your answer. Preferable with an explanation. If jsFiddle ever disappears then your answer loses all value. – j08691 Aug 28 '15 at 20:52
  • @j08691: Thanks for the reminder. Just added explaination. – DinoMyte Aug 28 '15 at 20:56
  • tested this and I am having trouble when i add it to the site, it is rendering this way: "Show More... So when you click on Show More it is just displaying the hidden items instead of taking you to the correct page. – Jenny Aug 28 '15 at 21:05
  • the problem here is that since you trying to invoke a js function as hyperlink url , the click event takes precedence on the event and won't execute the js method associated to href. One thing you can do is to have the referral id as a part of the href link and use onclick to invoke the actual method. I've edited the solution to reflect the new changes. Might not be the most elegant way to do this but it would do your job. – DinoMyte Aug 28 '15 at 21:26