Show/hide loop js issue

Question

I need a little help with the JS for this show/hide function

Essentially in the site there is PHP loop which echos out the HTML code below X-number of times.

I needed some JS to allow me to target each individual instance with a show/hide function, unfortunately my knowledge of JavaScript is low - I had some assistance from a developer with the code below but I seem to have gone wrong somewhere down the line as the console returns this error message "Uncaught SyntaxError: Unexpected identifier"

Any insight or help into this will be much appreciated!

Thanks in advance

The HTML

<span class="contentShow" >Dropdown Text Here...</span>
<a id="prod_more_trigger" ><span>More...</span></a>

The JS

    <script type="text/javascript">
        $(document).ready(function()
        {

            var i = 0;
            $(document).find('span.contentShow').each(function() {
                $(this).attr('data-id', i++);

                $('span.contentShow').hide();

            });

            i = 0;
            $(document).find('a.prod_more_trigger').each(function() {
                $(this).attr('data-id', i++);
                $(this).click(function() {

                var $span = $(document).find('span.content[data-id="' + $(this).attr('data-id) + "]');


                $('span.contentShow').toggle('fast');


                });
            });


        });
</script>

Sushanth -- · Accepted Answer · 2013-08-01 00:47:48Z

3

You are missing couple of quotes in this line below

   find('span.content[data-id="' + $(this).attr('data-id) + "]');

supposed to be

   find('span.content[data-id="' + $(this).attr('data-id') + '"]');
                                                        ^    ^
                                                        |    |
                                          Missing the closing quote

Also your anchor looks like this

<a id="prod_more_trigger">

Supposed to be

<a class="prod_more_trigger">

Since you are using class selector in your JS

You need not create a local variable i to assign a value. $.each passes a index. And you do not need to nest the event handler inside the $.each loop

Code

$(document).ready(function () {
    // Cache your selectors when using multiple times
    var $content = $('span.contentShow'),
        $trigger = $('a.prod_more_trigger');
    $content.each(function (i) {
        $(this).attr('data-id', i);
    });
    // This can be outside the loop
    $content.hide();

    $trigger.each(function (i) {
        $(this).attr('data-id', i);
    });

    $trigger.click(function () {
        var $span = $('span.content[data-id="' + $(this).attr('data-id') + '"]');
        $content.toggle('fast');
    });
});

Check Fiddle

edited Aug 1, 2013 at 0:47

answered Aug 1, 2013 at 0:38

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MikeDre Over a year ago

Great, thanks! - if I wanted to only apply the show/hide function to the particular instance that is being clicked would I need to assign specific IDs to each incrementally?

Sushanth -- Over a year ago

Glad to have helped.. :) Sure that should do

blender_noob · Accepted Answer · 2013-08-01 00:56:18Z

0

On your code you specified prod_more_trigger as id, it should be class

HTML

<span class="contentShow" >Dropdown Text Here...</span>
<a class="prod_more_trigger" ><span>More...</span></a>

edited Aug 1, 2013 at 0:56

answered Aug 1, 2013 at 0:41

blender_noob

1417 bronze badges

1 Comment

MikeDre Over a year ago

Thank you! wish I noticed this (It was a late night ha)

Collectives™ on Stack Overflow

Show/hide loop js issue

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related