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, Dec 15 '15 at 18:23

score 1 · Answer 1 · answered Dec 15 '15 at 18:31

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.

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, Dec 15 '15 at 19:01

score 0 · Accepted Answer · answered Dec 15 '15 at 18:22

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 '15 at 18:22

Praveen Kumar Purushothaman

164,888
24
203
252

Are you looking at the HTML4 or HTML5 restrictions. :) – epascarello Dec 15 '15 at 18:54
@epascarello Do you say W3C Working Draft is wrong? http://www.w3.org/TR/html4/types.html#type-id – Praveen Kumar Purushothaman Dec 15 '15 at 18:55
Oh yeah.. That's HTML4. Here's HTML5: http://www.w3.org/TR/html-markup/syntax.html#syntax-attribute-value – Praveen Kumar Purushothaman Dec 15 '15 at 19:00
Bro, just leave it. I am giving you an upvote for so much of argument. Enjoy! – Praveen Kumar Purushothaman Dec 15 '15 at 19:00

Jquery error: Syntax error, unrecognized expression

2 Answers2