Can I Make Collapsible Sections Drop More Slowly?

[Farnsbarnes]

I’ve got collapsible sections in a submission form.

Essentially this shows on the screen as buttons arranged in a column.  As I depress each button I expand menus associated with that button.  If I again press the same button the menus contract.  It all works but is very ‘jumpy’ on the eye.

 

Is there a way of slowing things down so that menus drop more slowly when expanding, and lift more slowly when contracting?

[aam82]

I think you want the CSS "easing" rule on the element.

 

caspio footer (source mode)

<style>

your_menu_object {

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease; }

</syle>

[Farnsbarnes]

Thanks, that looks great!    But being a beginner I can't seem to get this to work.

I tried putting your code in the footer with various DataPage elements in place of 'your_menu_object' but there was no impact on the expanding/collapsing sections (note that all my listboxes are virtual fields).  I also substituted 'HTML Block (x)' which carries the code for each button, but that didn't work either.

 

Already In the footer I've got Caspio's <script> code for collapsing the sections (as given in their online tutorials), so I'm wondering if that might be impacting on your code?

 

I'm no doubt missing the obvious!

 

Thanks for any help

[aam82]

my mistake. TIL HTML dropdowns can't be style much with CSS (there are a few exceptions). But there are js plugins that can accomplish this.

[svitlanataran]

Hi,

 

As far as I understand, you use solution from the article

 

Paste the following code in the footer, instead of the code for the footer, provided in the the article:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>

<script>
function Displayer(n)
{
$('#Section'+n).toggle('slow');
}
</script>

On my form it works perfectly, sections collapsing slowly.

 

Hope that helps.

 

Matilda

[Farnsbarnes]

Wow, thanks Matilda.  That's a clever bit of code.  I also discovered that you can use a number in place of 'slow' to denote milliseconds to get exactly the speed of the listbox coming into view.  Great improvement on the standard solution in the article.

 

Is there a way of building on this so that instead of the whole section expanding suddenly on toggle (and contracting suddenly), it slowly drops (and lifts) along with the listbox vertically expanding /contracting too?

[svitlanataran]

Hi,

 

Yes, you can set timer in milliseconds.

I'm glad that my solution was helpful

 

Regarding your question, as far as I understand, you'd like to collapse/expand only listbox field instead of whole section.

You may put only listbox field in the section. Do not use label for this field, use html block to add a label.

 

So, when you click on the button you will be able to see only expanded listbox. 

[Farnsbarnes]

HI Matilda

 

Not quite, I probably didn't make myself clear enough.  What happens right now (certainly on my screen) is that, on click, the section suddenly expands, and then the whole listbox slowly appears into view.  While this is a great improvement, the perfect solution would be for the section (and listbox inside) to gradually fall open.  From what I can research this means using  '.slideToggle('slow')' , instead of '.toggle('slow')'.   See http://www.w3schools.com/jquery/eff_slidetoggle.asp

 

The problem is that '.slideToggle' doesn't seem to do anything.   I've since read that this is because "the table is not a block element".    I also saw it could be made to work by "sliding a div rather than the table".    Unfortunately I don't know enough on how to change the code to make use of these recommendations

 

Thanks

[svitlanataran]

Ok, then I guess we can just make the table be a block element.

It should do the trick:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>



<script>

function Displayer(n)

{

$('#Section'+n).slideToggle().css("display", "block");

}

</script>

[Farnsbarnes]

Fantastic!  Thanks so much for your help Matilda.

[Alwayslost]

If anyone can help me on this: 
I am using the code below and it is display "none" and it is hover-able, but nothing happens and the section does NOT open and if I change to display "inline" to section elements show but they don't close on command. 

Any help is appreciated: 

script:

 

HTML block one: (disabled)
<input type="button" onClick="Displayer(1)" value="Personal information"><br>
<table id="Section1" style="display:none;"><td><h2>Personal information</h2>

input fields (4 of them, Y/N fields, and text fields)

after
HTML block two: (disabled)
</td></table>

Footer script (disabled)
<script>
function Displayer(n)
{
var check = document.getElementByld('Section'+n);
if(check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}
</script>

[Farnsbarnes]

Mmm - can't see anything obviously wrong with the code.  I know it's a basic question, but did you disable the HTML editor in the HTML block?

When you say it's "hover-able" I assume you just mean that the cursor changes shape when hovered over the button, and not that you expect the menu to open without clicking?.  

Have you checked to see whether this works on your webpage... sometimes preview doesn't show what it should.

I'll leave any other comments to the real Caspio experts!