jquery collapse: how to change style and change time open/close function

Question

Good day to all,

I'm using this plugin http://webcloud.se/jQuery-Collapse/ to add it on my website. Now I have tried to change the style of the header.. But it seems It can't be overridden, I'm referring to the text. And about the jquery function.. opening works just fine but closing won't respect the time given. How to fix this? Any help would be much appreciated! Thanks!

<div id="spot_collapse" style="margin:10px 10px;" data-collapse>
    <div style="color:#ccc">MAY</div>
    <div>
       <p>some text</p>
       <p>foo</p>
    </div>
</div>
<script>
   new jQueryCollapse($("#spot_collapse"), {
     open: function() {
     this.slideDown(200);
     },
     close: function() {
     this.slideUp(300);
     }
   });
</script>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

from documentation

Options

You can pass the following options when initializing the plugin with JavaScript.

show (function) : Custom function for showing content (default: function(){ this.show() })

hide (function) : Custom function for hiding content (default: function(){ this.hide() })

accordion (bool) : Enable accordion behaviour by setting this option to 'true'

persist (bool) : Enable persistence between page loads by setting this option to 'true'

so you should use SOURCE

Finally After reading document for 2 -3 times her eis what i understood.

If your Container has data-collapse property default collpase will be applied. You should Either use data-collapse or The Javascript code...NOT BOTH AT SAME TIME for same container.

Below code works as expected.

<div id="spot_collapse" style="margin:10px 10px;">
    <div style="color:#ccc">MAY</div>
    <div>
       <p>some text</p>
       <p>foo</p>
    </div>
</div>
<script>
new jQueryCollapse($("#spot_collapse"), {
     open: function() {
         
        this.slideDown(200);
     },
     close: function() {
      
         this.slideUp(300);
     }
   });
</script>

LIVE DEMO

jquery collapse: how to change style and change time open/close function

1 Answers1