Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kevin Grastorf 3 posts 73 karma points
    Feb 02, 2018 @ 06:37
    Kevin Grastorf
    0

    Expand collapsed tables in RTE

    Hello. I am new to Umbraco and I need to be able to expand collapsed tables in an RTE for the Content Editors to work with. The javascript is disabled in the RTE so each table cannot expand in order for the Content Editors to access all the content. The javascript uses slideToggle which by default is display:none; . How do I code this page in order to access all of the content in the RTE? Thanks!

  • Steve Morgan 1348 posts 4457 karma points c-trib
    Feb 02, 2018 @ 08:14
    Steve Morgan
    0

    Hi,

    Is this used as an accordion? I'd usually not just use a single RTE but rather a nested content list (or if you're on an older version of Umbraco either some kind of package that provides this or child content blocks) and then render the content on the front end with the display none and associated JS.

    Steve

  • Kevin Grastorf 3 posts 73 karma points
    Feb 02, 2018 @ 14:21
    Kevin Grastorf
    0

    HI Steve,

    Thanks for the feedback. I'm not sure how to achieve a nested content list. I've been looking for a way to associate textbox inputs into my HTML but haven't found the solution, yet. If I could get a nested content list that would be the best solution. Are you talking about several RTE's, macros or partial views?

    Thanks!

    Kevin

    <table border="0" class="table state-requirements">
    

    ALABAMA

    Alabama License Renewal Deadline: 9/30 annually

    Alabama CPE Reporting Period: 10/1 to 9/30 annually

    Alabama Total CPE Hours Required: 40 Hours

    Ethics Requirement: None

    Other Subject Area Requirement: 8 hours in Accounting and Auditing

    Alabama State Board of Public Accountancy

    <script type="text/javascript">
    $(document).ready(function($) {
    $('td.state-toggle h4').prepend('<span><i class="fa fa-chevron-down" aria-hidden="true"></i> </span>');
    $('td.state-toggle h4').on('click', function() {
      var req = $(this).parent().parent().next('.state-requirement');
      req.toggle();
      $('i', this).toggleClass("fa-chevron-down fa-chevron-up");
    });
    
    });
    
    function expand() {
    $('tr.state-requirement').slideToggle('slow');
    $('i').toggleClass("fa-chevron-down fa-chevron-up");
    }
    </script>
  • Søren Kottal 712 posts 4570 karma points MVP 6x c-trib
    Feb 02, 2018 @ 14:30
    Søren Kottal
    0

    Do you add all that code in the RTE?

    I would not do that. Check out Nested Content instead. That way, you can create a doctype ie. "State info", with the properties needed ie. "License Renewal Deadline", "CPE Reporting Period" etc.

    Then you create a Nested Content property instead of your RTE, using the State info doctype as the content. Your editors can then add a state, fill out the necessary content, and you get to define how it works in the frontend.

    You don't need to worry about editors changing/deleting the script, and editors don't need to worry about where in the table they have to edit.

  • Kevin Grastorf 3 posts 73 karma points
    Feb 02, 2018 @ 14:46
    Kevin Grastorf
    0

    Thank you, Soren. I will do that. I didn't realize that what Steve mentioned is a nested content property. I'll try that.

Please Sign in or register to post replies

Write your reply to:

Draft