Loading ...

Is it possible to add JQuery dropdowns on a wiki page? | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Is it possible to add JQuery dropdowns on a wiki page?
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Is it possible to add JQuery dropdowns on a wiki page?

Subscribe to RSS
  • Xenon

    I used Bootstrap 2.3.2's dropdown documentation on a wiki page in the code view editor, but the dropdowns don't open. Does this kind of code work in the wiki pages?

     

  • mtrujillo

    Hey Xeng,

         Does it work in a Page Builder Page > Raw HTML Widget?

    Matt

  • Xenon

    Yes, it does. I originally had it on one of our pages where I can use RAW HTML, but since this is a Wiki page, I wasn't sure if it'd work the same, since it's not really raw html in the wiki code editor.

  • mtrujillo

    After you publish the wiki page, look at the source code, were some elements/attributes removed after publishing?

  • Xenon

    Upon inspecting, everything seems to be where it should be.

  • mtrujillo

    Can you paste the code here? We use Bootstrap 2.3.2 dropdown divs in our documentation, check out Active Directory SSO for examples..

  • Xenon

    Thanks. I'll check out that page.

     

    <div class="benefitsTable" style="padding:20px; background-color: #fff; margin: 0 0 25px 0; border-radius: 4px;">
    <h4 style="margin-top:0;">HR Benefits</h4>
    <div class="accordion" id="accordion2" style="background-color: #fff;">
    <div class="accordion-group">
    <div class="accordion-heading" style="font-size: 15px;">
    <a style="text-decoration: none;" class="accordion-toggle dropdownHover" data-toggle="collapse" href="#collapseOne"><b>Health Benefits</b></a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
    <ul class="threeColList">
    <li style="margin-bottom:5px;"><a style="text-decoration: underline" href="#n" rel="noopener" title="Dental Plan" target="_blank">Dental Plan</a></li>
    <li style="margin-bottom:5px;"><a style="text-decoration: underline" href="#" rel="noopener" title="Life Insurance" target="_blank">Life Insurance</a></li>
    <li style="margin-bottom:5px;"><a style="text-decoration: underline" href="#" rel="noopener" title="Accidental Death and Dismemberment" target="_blank">Accidental Death &amp; Dismemberment</a></li>
    <li style="margin-bottom:5px;"><a style="text-decoration: underline" href="#" rel="noopener" title="Vision Care" target="_blank">Vision Care</a></li>
    <li style="margin-bottom:5px;"><a style="text-decoration: underline" href="#" rel="noopener" title="Long-Term Care Insurance" target="_blank">Long-Term Care Insurance</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    <script>
    $(function(){
    $(".dropdown").hover(
    function() {
    $('.dropdown-menu', this).stop( true, true ).fadeIn("slow");
    $(this).toggleClass('open');
    },
    function() {
    $('.dropdown-menu', this).stop( true, true ).fadeOut("slow");
    $(this).toggleClass('open');
    });
    });
    </script>

  • mtrujillo
      Answered

    Hey Xeng,

          We remove some advanced code for security reasons. You can allow advanced coding by:

    Control Panel > System Properties > System Properties  > HTMLSanitizeAllowedTags > Add script

    Control Panel > System > System Properties > HTMLSanitizeAllowedAttributes > Add data-toggle

  • Xenon

    Thanks, Matt.

    I'm not a developer, but what are the chances or possibilities of this code causing any kind of security issue for our site?

  • mtrujillo
      Answered

    Hey Xeng,

          Users will be able to add custom javascript using the WYSIWYG editor.

    Matt

  • Xenon

    Understood. I went back and removed "script" and just kept the "data-toggle".

  • Xenon

    Matt,

    I want to revisit this again, because I am not able to figure out how to have the drop downs be open as soon as the page loads. They work fine by default being closed, but how do I keep them open upon page load?

    Also, I want to add a chevron icon that animates from pointing to the right to pointing down next to the copy so that the user knows it's expandable. No luck in figuring that out on Boostrap's site either. All of theirs just points down.

    My code is using the same code from your Active Directory SSO page. 

  • gskamau

    Hey Xeng,

    To make the section open on page load, add "in" to the class list in the following line.

    <div id="collapseOne" class="accordion-body collapse">

    Add the following code in the script section to animate the chevron.

    $('#collapseOne').on('shown', function () {
    $(".icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#collapseOne').on('hidden', function () {
    $(".icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });

    Grace

  • Xenon

    Thanks, Grace.

    Where can I find the script section in the backend that controls this?

  • gskamau

    Hey Xeng,

    The script section is in the code you shared above. Add the code I provided above the last }); . The script section will look like below.

    <script>
    $(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("slow"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("slow"); $(this).toggleClass('open'); }); $('#collapseOne').on('shown', function () { $(".icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-up"); }); $('#collapseOne').on('hidden', function () { $(".icon-caret-up").removeClass("icon-caret-up").addClass("icon-caret-down"); }); });
    </script>

    Grace

  • Xenon

    I actually didn't put that script in my code. I assumed the code was being pulled from somewhere else, because the script still works without it in the editor. Thoughts?

    https://ascendiumthelift.com/myaccount/wiki/add-edit-wiki/18/media-assets/843

  • gskamau

    You can just add the code alone then, at the bottom of the HTML.

    <script>
    $(function(){
    $('#collapseOne').on('shown', function () {
    $(".icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#collapseOne').on('hidden', function () {
    $(".icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });
    });
    </script>

    Also add <em class="icon-caret-down"></em>  to the section heading between the closing strong and anchor tags, as follows:

    <div class="accordion-heading" style="font-size: 15px;"><a class="accordion-toggle dropdownHover" href="#collapseOne" style="text-decoration: none;" data-toggle="collapse"><strong>Health Benefits</strong> <em class="icon-caret-down"></em> </a></div>

     

  • Xenon

    Hmm...Adding the script into the wiki editor didn't work. It added the chevron, but it does not collapse when I click on the header again.

    Since I'm adding <script> into the wiki editor, I already updated the allowed tags on the backend as well.

  • gskamau

    Change "collapseOne" to "employment" in the script and heading.

  • Xenon

    Is the chevron working for you? It remains in the down position. Thanks for your patience, Grace.

  • gskamau
      Answered

    I updated the script to target the "employment" element instead of "collapseOne". The chevron works now.

  • Xenon

    Gotcha. I only updated it in the main body copy, not in the script. Thanks a lot, Grace!

  • Xenon

    Grace,

    If I have separate tables that use this code, how do you tell the script not to run the same function for all 4 of them at once? Right now, clicking on one of the dropdowns will animate all of the dropdowns in the other tables. I thought the IDs would differentiate them if they used a separate function? I added it to the first 2 tables to test. FYI, the intro table is closed intentionally.

    <script>

    $(function(){
    $('#intro').on('shown', function () {
    $(".icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#intro').on('hidden', function () {
    $(".icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });
    });


    $(function(){
    $('#employment').on('shown', function () {
    $(".icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#employment').on('hidden', function () {
    $(".icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });
    });

    </script>

  • gskamau
      Answered

    Hey Xeng,

    The line $(".icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down"); removes the class icon-caret-right anywhere it's found. To prevent this, we need to add an ID to the icons and update the script to find the icons by ID and class.

    Add IDs to the icons in the headings, like below.

    <div class="accordion-heading"><a class="accordion-toggle" href="#intro" style="text-decoration: none;" data-toggle="collapse">Start Here!&nbsp; <em class="icon-caret-down" id="intro-chevron"></em> </a></div>

    <div class="accordion-heading"><a class="accordion-toggle" href="#employment" style="text-decoration: none; background-color: #00617f; color: #fff;" data-toggle="collapse"><strong>100 Employment</strong> <em class="icon-caret-down" id="employment-chevron" style="color: #fff;"></em> </a></div>

    Update the script to get the icons by ID and class -- $("#intro-chevron.icon-caret-right") 

    <script>
    $(function(){
    $('#intro').on('shown', function () {
    $("#intro-chevron.icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#intro').on('hidden', function () {
    $("#intro-chevron.icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });
    });
    
    $(function(){
    $('#employment').on('shown', function () {
    $("#employment-chevron.icon-caret-right").removeClass("icon-caret-right").addClass("icon-caret-down");
    });
    $('#employment').on('hidden', function () {
    $("#employment-chevron.icon-caret-down").removeClass("icon-caret-down").addClass("icon-caret-right");
    });
    });
    </script>

    Grace

Page 1 of 1 (24 items)