If you look at this page you’ll see the state and services categories occupy a lot of real estate. It would be nice if there was a shortcode option so that each could be made collapsible so states or services or both.

A single column dropdown is too long.

I tried several ways but my css skills aren’t good enough I guess because I end up collapsing everything.

I’d like to use the “outline button” of the “Feature Section” for a different purpose than just linking to another page. I’d like to use the “raw HTML” and “raw Javascript” to make a collapsible out of it, expanding the function to the button by making an HTML class which I assigned. It partially works, next to the button is a “+” that turns into a “-” when I click on the button, which shows me that the code itself works. But no text is shown.

Can you help me there?

HTML:

<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS:

.collapsible:after {
  content: '+';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

Javascript:

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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

I would’ve contacted the premium support for this, but it wants me to log in an Visual Composer account which I didn’t make? I just bought the license.

I tried using the java code from here:
https://www.ads-software.com/support/topic/w4-post-list-collapsible-lists/

The code as is works, but all the headers are open per default. If I click them they collapse. How do I make them collapsible by default?

Settings
   +-->General (Tab)
   |   +-->Sections & fields
   +-->Forms (Tab)
   |   +-->Form 1 (Collapsible Section)
   |   |   +-->Field 1 (Sortable Collapsible Section)
   |   |   |   +-->Field 1 Attribute 1 (checkbox)
   |   |   |   +-->Field 1 Attribute 2 (text)
   |   |   |   +-->more fields
   |   |   +-->Field 2 (Sortable Collapsible Section)
   |   |   |   +-->Field 2 Attribute 1 (radio)
   |   |   |   +-->Field 2 Attribute 2 (checkbox)
   |   |   |   +-->Field 2 Attribute 3 (text)
   |   |   |   +-->more field
   |   |   +-->Field 3 (Sortable Collapsible Section)
   |   |   |   +-->more fields
   +-->Notifications (Tab)
   ...

The Forms tab is the one of interest. Hopefully you get the idea. Can this be done with AdminPageFramework? How would I go about making it happen?

Thanks in advance so much.

How can I do that?.

This is the code i’ve used for that:

@media (max-width: 1000px) {
 .collapse {
   display: block !important;
 }

 button.toggle.nav-toggle.mobile-nav-toggle {
   display: none !important;
 }
}

Here’s a mockup I made in Photoshop of what I want:

View post on imgur.com

As I said, When a user clicks on the video icon, it should change to a photo icon.
Is this even possible?

Any suggestions appreciated!

Section One | Section Two
SHARED SPACE that switches BETWEEN ONE & TWO

It MUST collapse when clicking the section titles. Is there any way to do this? I can’t find anything over Google. Is there some custom CSS I could use?

If you have any other suggestions on being able to use accordions or toggles to separate out form fields, I’d be grateful. Great plugin. THX.