CODEWITHSUNDEEP
javascriptjqueryhtml
SNEH PANDYA
SNEH PANDYA

Reputation: 797

Jquery unable to change the effects?

Here is the link,
I want the side-bar same as shown in my link I want the pointer that is moving along with my selection on different labels.Example home, charts,etc. So can anyone help me with the jquery.

html

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class = "active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a href="#">
                <i class="fa fa-home fa-fw"></i>
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-signal"></i>
                <span>Charts</span>
            </a>
        </li>
        <li>
            <a class="" href="#">
                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
                    <i class="fa fa-group"></i>Asset
                </span>
            </a>
            <ul class="children nav-child unstyled small collapse" id="sub-item-1">
                <li class="item-2 deeper parent active">
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                        <i class="fa fa-frown-o"></i>
                        </span>pending
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-plus"></i> </i>
                        </span>ADD
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-stack-exchange"></i>
                        </span>Stock
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-1">
                            <i class="fa fa-bullseye"></i>
                        </span>View all
                    </li>
                </li>
            </ul>
        </li>
        <li>
            <a class="" href="#">
                <span data-toggle="collapse" data-parent="#menu-group-2" href="#sub-item-2" class="sign">
                    <i class="fa fa-shopping-cart"></i>Vendor
                </span>
            </a>
            <ul class="children nav-child unstyled small collapse" id="sub-item-2">
                <li class="item-2 deeper parent active">
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-2">
                            <i class="fa fa-plus"></i>
                        </span>ADD
                    </li>
                    <li>
                        <span data-toggle="collapse" data-parent="#menu-group-2">
                            <i class="fa fa-eye"></i> 
                        </span>View
                    </li>
                </li>
            </ul>
        </li>
        <li> <a href="#" id="table">
            <i class="fa fa-th-large"></i>
            <span>Tables</span>
            </a>
        </li>
    </ul>
</div>

I had tried this.

js

$(document).ready(function() {   
    $('#sidebar ul').on('click', 'li' ,function(){ 
        $(this).append("<div class="pointer">
            <div class="arrow"></div>
            <div class="arrow_border"></div>");
    });
});

Upvotes: 0

Views: 124

Answers (2)

Alex_Crack
Alex_Crack

Reputation: 710

You should use CSS-classes. They are simplier and faster than DOM-manipulation.

Add needed blocks to all the li elements and show them by adding class.

There is example I've made for you http://plnkr.co/edit/ZbA05DlRt8lajAQKuvVw?p=preview

Upvotes: 0

Praveen
Praveen

Reputation: 56509

The problem is with this 

$(this).append("<div class="pointer">
  <div class="arrow"></div>
  <div class="arrow_border"></div>");

1) Missing to concatenate, so use " within '

$(this).append('<div class="pointer"><div class="arrow"></div><div class="arrow_border">/div>');

2) I think you're referring to wrong selector.

use sidebar-nav instead of sidebar

Based on these items I have created JSFiddle (I've added extra text to show it is working)

Upvotes: 1

Related Questions