Collapsible fieldsets in Foundation - zurb-foundation

I want to create collapsible fieldsets using just Foundation 5. I found this, done with jQuery.
Is there any Foundation-based plugin to create collapsible fieldsets?
Many thanks in advance

You can use accordion from the http://madmimi.github.io/angular-foundation/

Related

Using MultiFieldPanel inside a StructBlock

If you have a StructBlock class (used inside a StreamField)... Can you still use the Wagtail panels to group some fields (eg MultiFieldPanel) and (ideally!) use the collapsible class on the panel to hide them in some kind of "Advanced" panel?
I have tried adding the block.TextBlock definitions into the array for a panel the, however neither the Panel nor the Fields appeared in the form.
I cant see anything in the docs about using Panels in StructBlocks:
https://docs.wagtail.io/en/v2.8.1/reference/pages/panels.html
https://docs.wagtail.io/en/v2.8.1/topics/streamfield.html
It's not possible to use panels inside StreamField blocks. However, by overriding form_template on your StructBlock class you can set up whatever HTML structure you like:
https://docs.wagtail.io/en/stable/advanced_topics/customisation/streamfield_blocks.html#custom-editing-interfaces-for-structblock

how to add dynamically the select box in custom form in foundation framework

i have a problem in adding select box dynamically in custom forms in foundation css framework.even if i add select within the form that have class name "custom".its added normal style select box only.
<pre>
var createdRow ="<tr><td><select><option value='1'>1</option></select></td></tr>";
jQuery('#roomsDetails tbody').append(createdRow);
</pre>
run this code after u added select
Foundation.libs.forms.assemble();
If you want to add style to the element, just use jQuery('option').addClass('some css class'); or jQuery('option').css('property', 'value');

JQuery - DatePicker not working in popup forms

DatePicker is not working in a popup form, what could I've done wrong?
The form is in a .php format and is triggered by this javascript function below:
function popitup_request(url, ar){
var f = document.forms[0];
if(ar==""){
alert("Please choose at least one record.");
return false;
}
newwindow=window.open(url, 'name', 'toolbar=0,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=0,
width=570,height=280');
if (window.focus) {
newwindow.focus()
}
newwindow.moveTo(screen.availWidth/2-(500/2),screen.availHeight/2-(300/2));
}
the form loads but when you click on the icon-trigger nothing happens.
I already tested including the jquery-1.7.1.js on both main.php and popup.php.
I assume you bind the Datepicker widget to the form elements in your main view. Since popup is loaded later (on popitup_request), the date fields on that form will not be bound to datepicker.
Include the datepicker js and css only once, in your main view. Add a small javascript to the bottom of your popup form, something along the lines of
<script type="text/javascript">
$("input.date").datepicker();
</script>
Btw, your code does not reflect best practices in a number of ways (pixel based layout, magic numbers, mixing native Javascript and jQuery though it's not needed). I'd suggest you go through both a Javascript and a jQuery tutorial to see suggested patterns and good examples for enhancing web pages with Javascript.

I'm writing a custom widget for django-admin that requires some JavaScript, where do I put it?

It seems wrong to add
<script src="..."></script>
to the render() of the widget. Especially if I have 2 of them on the same page. Is there a way to add a single script include on the admin form pages, in a way where I don't edit core files?
Widgets have a Media inner class that allows you to specify scripts and styles that need to be loaded. See the documentation.
You can set external javascript libraries in the Media class:
class ArticleAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ("my_styles.css",)
}
js = ("my_code.js",)

How to create a resizeable TinyMCE textarea?

I have a Django form using textareas and TinyMCE for text entry.
I would like to add a slider to change the vertical size of the textarea, like SO has them so nicely.
How can this be done?
Just add 'theme_advanced_resizing : true' In the tyniMCE init call