Using VC Buttons as Collapsibles

  • Resolved Madlynn

    (@m4dlynn)


    1 year, 2 months ago

    Hello,

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Rohan Khandeparkar

    (@rohanvc)

    Hi,

    From what I understand, you want to add a button in the Feature section that will show text if it is clicked.

    This might be possible with some custom CSS and JS code. The logic will be to hide the current button and then add it using HTML via text block. The content that needs to be displayed/hidden needs to be wrapped in a div. The js code will detect the mouse click event on the button and accordingly add/remove a CSS class to the div that has content in it. The CSS classes will have the property of display which in turn will toggle it’s display on/off.

    The account is linked to the email id that was entered on the checkout page while purchasing the plugin. You can reset the account password here: https://my.visualcomposer.com/reset-password to login into the account.

    Thanks,

    Thread Starter Madlynn

    (@m4dlynn)

    ?The logic will be to hide the current button and then add it using HTML via text block.

    I don’t understand, why can’t I use the button that is already given by the feature section?

    And even if so, I tried entering the HTML code I sent you into the text block of the feature section as you said. I assigned the css too and added raw js afterwards. I tried to make a toggable class with js with this as my orientation:

    https://www.w3schools.com/howto/howto_js_toggle_class.asp

    I tried to adjust the code there so the css class given will be display: none; and it didn’t work on my end. It would also mean that the small animation of the css I’ve already provided would be gone.

    I don’t understand what I have to do. Isn’t a toggable button like this very basic? Why is this not an option for the buttons there already provided by VC?

    But thank you for your advice with the premium account, I was able to retrieve it! ??

    Plugin Support Rohan Khandeparkar

    (@rohanvc)

    Hello,

    The code shared by you requires the CSS class to be added directly to the button HTML tag. This is not possible in the button of the feature section as an extra CSS is added to its parent div container.

    The main purpose of the feature section button is to link to a section, page, or website. For eg: It is mostly used to display content such as packages, portfolios, etc. with its image and a brief description, and the user is taken to its detailed page or website when the button is clicked.

    The Visual Composer has a separate toggle element that can display its content when its title is clicked.

    The support team has responded via the ticket opened by you in the support portal.

    Thanks,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using VC Buttons as Collapsibles’ is closed to new replies.