0

I have a jquery accordion inside a draggable div. Once the div has been dragged it becomes a fixed height and doesn't react to the accordion as expected. Any advice?

You can see it not working at http://addresslabels.tk/templates just select the 14 per sheet template and it's the menu on the left.

   $(function() {
$( ".draggable" ).draggable();
   });

$(function() {
$( ".closedaccordion" ).accordion({
  collapsible: true,
   active: false
});
  $( ".openaccordion" ).accordion({
        collapsible: true,
     });

Css:

 #printmenu {
 position:fixed;
 width: 235px;
 height: auto;
 padding: 10px;
 border-radius: 5px; 
 }

html

 <div id="printmenu" class="jsonly ui-widget-content draggable">
 <div class="closedaccordion">
 <h3>Accordion</h3>
 <p>content</p>
 </div> 
 </div>

The answer shown in the duplicate question doesn't work for me so I have to add this question!

David A
  • 88
  • 10
  • 1
    FYI-seems to work OK for me on both Windows Chrome 48 and MS Edge 25 but fails on Firefox 40.0.2. – Jason Fetterly Feb 06 '16 at 03:38
  • I was indeed testing with firefox, thanks for letting me know. Still annoying problem though. – David A Feb 06 '16 at 03:43
  • You're welcome. I updated my Firefox to newest (44) and it still fails. Found more information here: http://stackoverflow.com/questions/29066514/jquery-accordion-on-draggable-element-height-of-draggable-not-auto-resize – Jason Fetterly Feb 06 '16 at 03:47
  • Thanks again... I don't have a clue about JavaScript, I have tried to implement `$('#printmenu').css({height; 'auto'});` into the javascript code above but can't get it working. I assume it needs to be triggered on release of the draggable div. Any ideas? – David A Feb 06 '16 at 04:27

2 Answers2

1

I used this javascript to fix this problem happening in firefox -

$("#printmenu").draggable({ handle: "#printmenutitle" });

$( ".closedaccordion" ).accordion({ collapsible: true, active: false });

$( ".openaccordion" ).accordion({ collapsible: true, });

$('#printmenutitle') .bind('mouseup', function(){
    document.getElementById('printmenu').style.height = 'auto';
}); 
David A
  • 88
  • 10
0

It looks glitchy because it isn't animated, but adding $('#printmenu').css('height', 'auto') to the activate event of the accordian does resize the box properly:

$(function () {
    $(".draggable").draggable();
    $(".closedaccordion").accordion({
        activate: function () {
            $('#printmenu').css('height', 'auto');
        },
        collapsible: true,
        active: false
    });
    $(".openaccordion").accordion({
        collapsible: true
    });
});
Jason Fetterly
  • 182
  • 1
  • 12
  • I tried that but it didn't work, when I used inspect element in firefox the height was set to 332px after dragging. I fixed it in the end, I'm going to post the answer but please tell me if it's not a good way of doing it! – David A Feb 06 '16 at 06:15