CODEWITHSUNDEEP
javascriptjqueryhtmlcss
brainmassage
brainmassage

Reputation: 1254

Jquery panel slider won't close after I changed its CSS from right to left

Follow up to this question.

I have fixed the jquery. Now I want to use it from the left side instead of right. So I changed its class from "cd-panel from-right" to "cd-panel from left". It works well while opening but The button is disabled after it opens and cannot be closed.

I tried to tweak things in CSS such as changing "left"s to "right" and vice versa but had no luck. On JSfiddle CSS nothing is changed but the button's position.

HTML: 

<div class="cd-panel from-left">
    <div class="cd-panel-container">
    <button href="#0" class="cd-btn btn-primary">Views</button>
    <div class="cd-panel-content" ng-controller="ViewtreeCtrl">

    </div>
    <!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->

Javascript: 

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').toggleClass('is-visible');
    });
});

JsFiddle demo (You can see the CSS on JSFiddle)

Upvotes: 0

Views: 134

Answers (1)

cakan
cakan

Reputation: 2117

The button is not being disabled, but it's displayed under the .cd-panel-content div.

To solve this, you can add z-index:1 to .cd-btn class.

Another solution might be to add pointer-events:none to .cd-panel-content, but in that case, links on .cd-panel-content won't work, so I'll go with z-index solution.

Upvotes: 1

Related Questions