Collapsible Div

atom · Unread post by **atom** » Fri May 11, 2018 11:53 am

Hello nuBuilder Pros,
Any idea how to organize and group fields
into a Collapsible Divs, more importantly
for lengthy data entry Tables, also is it
possible to replace Tabs with the same.
Thank you.

toms · Unread post by **toms** » Fri May 11, 2018 1:48 pm

atom wrote: Any idea how to organize and group fields
into a Collapsible Divs, more importantly
for lengthy data entry Tables,

This (https://vimeo.com/269171750) is my attempt, using this code as a basis: https://www.w3schools.com/howto/tryit.a ... ollapsible

1. Create a html object. This serves as a container for the Collapsibles.

html_object.png

HTML Code:

Code: Select all

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    height: 100px;
}
</style>
</head>
<body>

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button id="collapsible0"  class="collapsible">Open Collapsible</button>
<div id="section0" class="content">
</div>

<p>Collapsible Set:</p>
<button id="collapsible1" class="collapsible">Open Section 1</button>
<div id="section1" class="content">
</div>
<button id="collapsible2" class="collapsible">Open Section 2</button>
<div id="section2" class="content">
</div>
<button id="collapsible3" class="collapsible">Open Section 3</button>
<div id="section3" class="content">
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
}
</script>

</body>

2.
This code (to be placed in the form's JavaScript field) is used to move your fields to the different sections:

Code: Select all


(function ($) {
    $.fn.moveTo = function (selector) {
        return this.each(function () {
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

function moveFieldToSection(f, c, s, t) { // field, section
   
    $('#' + f).moveTo('#' + s);
    $('#' + 'label_' + f).moveTo('#' + s);	
    var newTop = $('#' + c).offset().top + t -$('#nuRECORD').offset().top + 30;

    $('#' + f).css({ "top": newTop, "position": "absolute"});
    $('#' + 'label_' + f).css({"top": newTop, "position": "absolute"});
}

if (nuFormType() == 'edit') {
moveFieldToSection('customer_city', 'collapsible2', 'section2', 20); // position within the div
moveFieldToSection('customer_name', 'collapsible1', 'section1', 20);
moveFieldToSection('customer_address', 'collapsible1', 'section1', 46);
}

Fields on the form:

fields_on_form.PNG

This is just a proof of concept and will need some fine-tuning!

atom wrote: also is it
possible to replace Tabs with the same.

I don't think this is easily possible.

toms · Unread post by **toms** » Sat May 12, 2018 10:15 am

This is how you could implement vertical tabs: https://vimeo.com/269331514

1. Place a html object on your form with this html content:

Code: Select all

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1; 
    width: 30%;
    height: 132;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 12px 16px;
    width: 100px;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #ccc;
}

</style>
</head>
<body>


<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Tab 1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'Tab 2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'Tab 3')">Tab 3</button>
</div>

<script>

function openTab(evt, tab) {
    // Show the current tab, and add an "active" class to the link that opened the tab
    evt.currentTarget.className += " active";

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    
	nuSelectTabByTitle(tab);
	
	$('#html_vert_tabs').show();
}

function nuSelectTabByTitle(tab) {
    $('[id^=nuTab]').each(function (index) {
        if ($(this).html() == tab) {
            var tabNumber = +index -1;
            var e = document.getElementById('nuTab' + tabNumber);
            nuSelectTab(e);
            $('.nuTab[id^="nuTab"]').hide();
            return true;
        }
    });
}

</script>

</body>

2. In your form's JavaScript field:

Code: Select all

if (nuFormType() == 'edit') {
      $('.nuTab[id^="nuTab"]').hide(); // hide horizontal tabs
}

3. To test it, create add these 3 tabs to your form:

form_tabs.png

atom · Unread post by **atom** » Sat May 12, 2018 6:55 pm

Thanks a lot @toms, this is great,
do you think, a separate band/section
before Tab holder is doable, in this
section I can put some fields I need
viewable at all times, then below
this, the usual Tabs are fine plus
the collapsibles.

toms · Unread post by **toms** » Sun May 13, 2018 7:52 am

You could clone the existing nuTabHolder div:

Code: Select all

$('#nuTabHolder').clone(false,false).attr('id', 'nuTopBar').removeClass('nuTabHolder').addClass('nuTopBar').insertBefore($('#nuTabHolder')).children().remove();
$("#nuTopBar").css({ "height":  20 });

Then move the fields to the new div.

Code: Select all

$('#cus_name').prependTo("#nuTopBar");
  $('#cus_name').css({
        "top":  0,
        "left": 0,
        "position": "relative",
 });

To do: Keep the fields visible / make them visible again when the tab changes.

nuBuilder Forum

Collapsible Div

Collapsible Div

Re: Collapsible Div

Re: Collapsible Div

Re: Collapsible Div

Re: Collapsible Div