Jquery - Error: Syntax error, unrecognized expression: #

Question

I have some tabs inside an accordion that don't seem to be working and the error in the console is:

Error: Syntax error, unrecognized expression: #

I've googled the error and still can't seem to get a handle on what might be causing it. From looking at the code it all looks ok as mostly it's just straightforward.

The HTML is:

<div class="access-privilages">
                <!-- Accordions -->
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_hradmin">First</a>
                            </h4>
                        </div>
                        <div id="collapse_hradmin" class="panel-collapse collapse in">
                            <div class="panel-body">

                                <!-- Tabs -->
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a id="personal" href="#">Personal Information</a>
                                    </li>
                                    <li><a id="financial" href="#">Financial Information</a></li>

                                </ul>
                                <div class="tabContent" id="tabContent_personal">


                                </div>
                                <div class="tabContent" id="tabContent_financial">

                                </div>  

                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_rmgadmin" class="collapsed">Second</a>
                            </h4>
                        </div>
                        <div id="collapse_rmgadmin" class="panel-collapse collapse">
                            <div class="panel-body">
                                <p>Second Section</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

And the JS is pretty simple:

$(".nav a").click(function(e) {
                $(this).tab("show");

                var tabContent = "#tabContent_" + this.id;

                $("#tabContent_personal").hide();
                $("#tabContent_financial").hide();
                $(tabContent).show();
            });

Here's a Fiddle. Any ideas?

.tab() <--- What library is this function a part of? That is not a standard jQuery function -- so I suspect that your issue lies in whatever library is associated with tab() - and it is having trouble with your hashes being used as your hrefs. Try using "javascript:void(0)" instead of # in your anchors. — Korgrue
– Korgrue, Commented Aug 31, 2017 at 16:15
@WebDevelopWolf its not working with jQuery 3.2.1, use jQuery 2.2.4. Works fine — Saurabh
– Saurabh, Commented Aug 31, 2017 at 16:21

t.niese · Accepted Answer · 2017-08-31 16:22:04Z

2

Bootstrap uses the content of the href to query for the container that should be shown.

But your links only have # as href:

<a id="personal" href="#">

So the query will be $('#'), and that is is the reason for the error message:

If you write:

<a id="personal" href="#tabContent_personal">

and

<a id="financial" href="#tabContent_financial">

it will work fine.

edited Aug 31, 2017 at 16:22

answered Aug 31, 2017 at 16:19

t.niese

41k9 gold badges78 silver badges111 bronze badges

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

Collectives™ on Stack Overflow

Jquery - Error: Syntax error, unrecognized expression: #

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related