Draggable divs from accordion

Question

I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page. The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video. I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden. ``` overflow: hidden; ``` JSFiddle to further show my problem. How could I possibly fix this / what are possible ways to get around it.

Accepted Answer

Try adding this to your css

```
.accordion-heading + div.accordion-body {
     position: static;
}
```

Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/ If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static. For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.

Draggable divs from accordion

Solution

Problem