Tab menu to hide and show objects on 1 page

This menu is pretty awesome menu and works pretty much like the field options menu in knack. You can use the menu to show and hide multible forms, lists, tables based on the active tab. This means you can have multible objects on one page without having to have additional pages.

Works well with modals and pages and resizes for mobiles and tablests etc

I 've added a link to show you this and test it yourself

https://johnparsons.knack.com/knack-feature-test#home/

You can keep the javascript down to an absolute minimum by adding a Rich text to a page view and then adding the HTMLinto.

<main>

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Messages</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">Documents</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tasks</label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4">Events</label>

<section id="content1">
<p>

</p>
<p>

</p>
</section>

<section id="content2">
<p>

</p>
<p>

</p>
</section>

<section id="content3">
<p>

</p>
<p>

</p>
</section>

<section id="content4">
<p>

</p>

<p>

</p>
</section>

</main>

You will need to change the classes. I have also added paragraph tabs so you can add text if you wanted to.

CSS

You will need to add your view this will be the rich text view

#view_ *, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#view_ #html, body {
height: 100vh;
}

#view_ body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
}

#view_ h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}

#view_ p {
margin: 0 0 20px;
line-height: 1.5;
}

#view_ main {
min-width: 320px;
max-width: 800px;
margin: 0;
background: #fff;
}

#view_ section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}

#view_ input {
display: none;
}

#view_ label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}

#view_ label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}

#view_
label[for*='1']:before { content: '\f075'; }
label[for*='2']:before { content: '\f15b'; }
label[for*='3']:before { content: '\f0ae'; }
label[for*='4']:before { content: '\f073'; }
}

#view_ label:hover {
color: #888;
cursor: pointer;
}


#view_ input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}

#view_
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}

#view_
@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}

#view_
@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}

Javascript

This will need to be repeated for each button for a menu but very clean without having to add any HTML at all.

$(document).on('knack-page-render.any', function (event, view, data) {
$('#tab1').click(function(){
$('#view_3210').show(300);
$('#view_3232').show(300);
$('#view_3678').hide(300);
$('#view_3679').hide(300);
$('#view_3681').hide(300);
$('#view_3682').hide(300);
$('#view_3683').hide(300);
});
});

This works great, but I have a question. How do you make all of the views except for the selected one hide on initial load? When I first load the page, or refresh, the first tab is selected but all the views show. Once you start clicking other tabs, everything hides and shows correctly.

@johnathan

This looks like a nice GUI option. Your UTL link is broken now though.

Do you have another sample?

Thanks in advance

Phil

Hi kim, can do a side scroller for views. But wouldnt recomend utalising it as a sidenav main menu. Willing to offer some help ping me a email jonathan.mart.parsons@gmail.com

Hi Kim,

Thanks for the kind words! Yes of course you can do many things with this. I did make an accordian if this was thetype of thing you was looking for.

Perhaps you could show me a link to an example you had in mind.

Hi Jonathon

This is great - brilliant in fact! I don't suppose you know how to make it a vertical tab/menu rather than horizontal (down the left side)?

Thanks Guy, if you need any help just let me know.

I like the look of this. I have an app where there are communities, each with several buildings, each with products they use, and then there are contacts from different companies that play a role across these locations. All of these items are separate connected objects.

so i have menu items for each of the above objects, and under each is the primary object info as per menu, but then the associated connected info below it. Ties everything to gether so the user can access info quickly from any location, but makes the pages a little long. I do not have the CSS knowledge (or time to learn) to make the page look organised. This would help me bring this detail into a more organised format (and better UX).

I will have a go at applying this and see how i go

Hi marc. This should work you will need tol simply set up a user with a password

Hi Jonathan,

This seems like a really great find!

Would love to check the link: https://johnparsons.knack.com/knack-feature-test#home/, but it seems to be password protected.

Thanks ,

Marc