Need to toggle CSS slide-in function with click on different div?

Question

I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.

$( document ).ready(function() {
    $(function(){
        $(".slide-in").addClass("active");
        console.log($(".slide-in"));   
    });
});

I think the solution could be some kind of toggle system, but i can't figure out how to?

Thank you!

You are duplicating. – Praveen Kumar Purushothaman Jan 24 '16 at 22:43 — Praveen Kumar Purushothaman, Jan 24 '16 at 22:43
@PraveenKumar What do you mean? – Mikkel Lehrmann Jan 24 '16 at 22:46 — Mikkel Lehrmann, Jan 24 '16 at 22:46

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

Try this.

var someDiv = document.getElementById('yourDiv');

someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
  //do something  
}

how to make div click-able?

edited May 23 '17 at 12:23

Community

1
1

answered Jan 24 '16 at 22:47

Fennek

197
1
11

dvenkatsagar · Answer 2 · 2016-01-24T23:24:27.903

1

I think this should do the trick.

Edit:

$( document ).ready(function() {
  $(".button").on("click",function(){
    if($(".slide-in").hasClass("active")){
      $(".slide-in").removeClass("active");
    }else{
        $(".slide-in").addClass("active");
    }  
  });
});

edited Jan 24 '16 at 23:24

answered Jan 24 '16 at 22:59

dvenkatsagar

936
7
22

This closes only if the .slide-in is clicked, not "anywhere outside the slide-in box" – Petr Hejda Jan 24 '16 at 23:00
It sort of works, but when i need to close it, i would like the button to trigger it back. At the moment you need to click the slide-in itself. How can I change this - thank you! – Mikkel Lehrmann Jan 24 '16 at 23:03
@MikkelLehrmann Well I edited the answer, Depending on you needs, you can use this as well... – dvenkatsagar Jan 24 '16 at 23:27

Petr Hejda · Accepted Answer · 2016-01-24T23:09:51.447

1

Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)

var isOpened = false;
$(document).click(function(e) {
  if(isOpened && e.target.className=='slide-in') {
    $(".slide-in").removeClass("active");
    isOpened = false;
  } else if(!isOpened && e.target.className=='button'){
    $(".slide-in").addClass("active");
    isOpened = true;
  }
});

Better is to use IDs. So your code would be:

<div id="slide-in"></div>
<div id="button"></div>

and the javascript:

var isOpened = false;
$(document).click(function(e) {
  if(isOpened && e.target.id!='slide-in') {
    $("#slide-in").removeClass("active");
    isOpened = false;
  } else if(!isOpened && e.target.id=='button'){
    $("#slide-in").addClass("active");
    isOpened = true;
  }
});

You'll also need to change the CSS from classes to IDs

edited Jan 24 '16 at 23:09

answered Jan 24 '16 at 23:03

Petr Hejda

40,554
8
72
100

This is awesome, but at the moment, the #slide-in closes, when you click itself. I only wants it to close, when you click anywhere outside the box? – Mikkel Lehrmann Jan 24 '16 at 23:08
Edited my answer. Now it closes only on clicking outside the box. – Petr Hejda Jan 24 '16 at 23:10
Awesome. Thank you very much! – Mikkel Lehrmann Jan 24 '16 at 23:11
Can you help me again? If i would like the button to disappear, whenever the #slide-in is active. Is there an easy solution to this? – Mikkel Lehrmann Jan 25 '16 at 14:02
Add $("#button").hide() to the opening part and $("#button").show() to the closing part of the script. – Petr Hejda Jan 25 '16 at 18:17

score 1 · Answer 4 · answered Jan 24 '16 at 23:12

https://jsfiddle.net/zer00ne/jne1rasb/

$(document).ready(function() {
  $('.button').on('click dblclick', function(e) {

    $('.slide-in').toggleClass('active');
    e.stopPropagation();

  });
  $(document).on('click', function() {
    $(".slide-in").removeClass("active");
  });
});

Need to toggle CSS slide-in function with click on different div?

4 Answers4