Jquery error: Syntax error, unrecognized expression

Question

This is my HTML:

<div class="dropdown-text" id="dropdownopen" onclick="dropdownopen(0)">
    <div class="inside">+ Show Content</div>
</div>

<div class="dropdown" id="dropdownnum(0)">
     <div class="inner">INSERT DROPDOWN CONTENT IN HERE</div>
</div>

And here is my JS (Jquery):

function dropdownopen(param) {
    $('#dropdownnum('+param+')').fadeOut(300);
}

The #dropdownnum(0) div is display:none; by default, so this should work, but I get the error:

Uncaught Error: Syntax error, unrecognized expression: #dropdownnum(0).

the naming of your ids is going to cause issues. consider using classes or just dropdownnum1, dropdownnum2 etc. — Cory
– Cory, Commented Dec 15, 2015 at 18:23

epascarello · Accepted Answer · 2015-12-15 18:31:40Z

1

The ( and ) needs to be escaped.

function dropdownopen(param) {
    $('#dropdownnum\\('+param+'\\)').fadeOut(300);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-text" id="dropdownopen" onclick="dropdownopen(0)">
    <div class="inside">+ Show Content</div>
</div>

<div class="dropdown" id="dropdownnum(0)">
     <div class="inner">INSERT DROPDOWN CONTENT IN HERE</div>
</div>

But you really should pick a different naming scheme for your ids so you do not have to do this.

answered Dec 15, 2015 at 18:31

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Praveen Kumar Purushothaman Over a year ago

Have your vote, better let's not argue for this silly thing. It is better to avoid such a way of writing the values. And you too agree with it. :) The OP is doing it unknowingly. It's okay that now they understood.

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-15 18:22:21Z

0

You cannot have special characters like ( and ) in a value of id. Please try changing your code to:

<div class="dropdown-text" id="dropdownopen" onclick="dropdownopen(0)">
    <div class="inside">+ Show Content</div>
</div>

<div class="dropdown" id="dropdownnum-0">
     <div class="inner">INSERT DROPDOWN CONTENT IN HERE</div>
</div>

function dropdownopen(param) {
    $('#dropdownnum-'+param).fadeOut(300);
}

answered Dec 15, 2015 at 18:22

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

4 Comments

epascarello Over a year ago

Are you looking at the HTML4 or HTML5 restrictions. :)

Praveen Kumar Purushothaman Over a year ago

@epascarello Do you say W3C Working Draft is wrong? w3.org/TR/html4/types.html#type-id

Praveen Kumar Purushothaman Over a year ago

Oh yeah.. That's HTML4. Here's HTML5: w3.org/TR/html-markup/syntax.html#syntax-attribute-value

Praveen Kumar Purushothaman Over a year ago

Bro, just leave it. I am giving you an upvote for so much of argument. Enjoy!

Collectives™ on Stack Overflow

Jquery error: Syntax error, unrecognized expression

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related