Setting Drop-down Text to Open Expanded

This forum is for all Flare issues related to styles, stylesheets and XML.
MikeKatz
Sr. Propeller Head
Posts: 133
Joined: Tue Mar 07, 2006 5:54 pm

Hi Gary...

Post by MikeKatz »

I'm no expert, but the script does define dDowns, as you can see by glancing back to Scott's code. I would try to copy and paste the code again from the earlier topic in case you missed one or more lines somewhere. You could also cut and paste your script into a reply here, and we can check it.
Mike
Gary Niemen
Sr. Propeller Head
Posts: 222
Joined: Fri Sep 12, 2008 1:57 am

Re: Setting Drop-down Text to Open Expanded

Post by Gary Niemen »

'Show all' line is:

<p> </p><a href="javascript:void(0)" onClick="showDropDowns()">Show all</a>

Script is:

function showDropDowns() {
///*<![CDATA[*/var dDowns=document.getElementsByTagName('div');
for (i=0;i<dDowns.length;i++) {
if (dDowns.id.indexOf('MCDropDownBody') != -1) dDowns.style.display = "block";
} } ///*]]>*/</script>

Both of these inside <body>...</body>
MikeKatz
Sr. Propeller Head
Posts: 133
Joined: Tue Mar 07, 2006 5:54 pm

Re: Setting Drop-down Text to Open Expanded

Post by MikeKatz »

Gary Niemen wrote:'Show all' line is:

<p> </p><a href="javascript:void(0)" onClick="showDropDowns()">Show all</a>

Script is:

function showDropDowns() {
///*<![CDATA[*/var dDowns=document.getElementsByTagName('div');
for (i=0;i<dDowns.length;i++) {
if (dDowns.id.indexOf('MCDropDownBody') != -1) dDowns.style.display = "block";
} } ///*]]>*/</script>

Both of these inside <body>...</body>


It's not the same as Scott's script:
//<![CDATA[
var dDowns=document.getElementsByTagName('div');
You have "*/" before "var", and maybe also you need to have it on a new line. So, it loks like the var statement is not being recognised.
Mike
scott
Propeller Head
Posts: 80
Joined: Tue Jan 03, 2006 6:35 pm
Location: miami
Contact:

Re: Setting Drop-down Text to Open Expanded

Post by scott »

Hi Gary (and thanks, Mike!),

The variable definition:
var dDowns=document.getElementsByTagName('div');

needs to be on its own line:
///*<![CDATA[*/
var dDowns=document.getElementsByTagName('div');

That should fix it.
Scott DeLoach
Certified Flare trainer/consultant - http://www.clickstart.net
* MadCap Flare: The Definitive Guide
* CSS to the Point
* HTML5 to the Point
https://bit.ly/2LQN11O

scott@clickstart.net
Certified MAD for Flare
Gary Niemen
Sr. Propeller Head
Posts: 222
Joined: Fri Sep 12, 2008 1:57 am

Re: Setting Drop-down Text to Open Expanded

Post by Gary Niemen »

Yes, that worked - thanks.
Ruwin
Propeller Head
Posts: 12
Joined: Wed Dec 14, 2011 4:18 am

Re: Setting Drop-down Text to Open Expanded

Post by Ruwin »

Hi, i am looking for a similar thing: i would like all my dropdowns to have a close button at the end of the dropdown content. I understand that i can manually place a link with javascript and tell the script to click link number X, but is there a way to make this a default button, that can be applied on every dropdown?
Another useful thing would be having two buttons in the toolbar: one for opening all dropdowns and one for closing all dropdowns. Because if i have an opened dropdown and three closed ones, when i click the current toggle button, it first opens all the dropdowns and only at a second click it closes them.

Thanks!
echopraxia
Propeller Head
Posts: 13
Joined: Wed Aug 29, 2012 11:38 am

Re: Setting Drop-down Text to Open Expanded

Post by echopraxia »

I just tried using this for Flare 8.1.1 and none of the Drop-down text was expanded. I was really hoping this would work for the current version :(


Edit: I failed to mention that I'm using an HTML5 output *not* a WebHelp output. Dave Lee was kind enough to provide a solution for me on another thread.
Dave Lee wrote:
If you're using HTML5 help only, use this script to open all dropdowns:

Code: Select all

<script>
  $(window).load(function() {
    $(".MCDropDownHotSpot").click();      
  });
</script>
And this one will open all togglers:

Code: Select all

<script>
  $(window).load(function() {
    $(".MCToggler").click();      
  });
</script>
These will work in the output, but not in preview mode.

Both scripts are written in jQuery, which is used by HTML5 help.
The scripts select all tags with a particular class name in the output (e.g. HTML5 output uses span.MCDropDownHotSpot and span.MCToggler), and then click these tags.
Last edited by echopraxia on Fri Sep 21, 2012 12:00 pm, edited 1 time in total.
i-tietz
Propellus Maximus
Posts: 1219
Joined: Wed Oct 24, 2007 4:13 am
Location: Fürth, Germany

Re: Setting Drop-down Text to Open Expanded

Post by i-tietz »

Ruwin wrote:I understand that i can manually place a link with javascript and tell the script to click link number X, but is there a way to make this a default button, that can be applied on every dropdown?
You could have a javascript in your masterpage that is triggered onload of the topic and inserts a link just before the closing of the dropdownbody div.

A dropdown in the help looks like this:

Code: Select all

<div class="MCDropDown_0">
     <div class="MCDropDownHead_0"><a class="MCDropDownHotSpot_0" href="javascript:void(0);" id="MCDropDownHotSpot_4000055646_1" onclick="FMCDropDown( this ); return false;"><img style="border: none;margin-right: 5px;" src="../../../SkinSupport/DropdowClosed.png" MadCap:altsrc="../../../SkinSupport/DropdownOpen.png" onload="if ( typeof( FMCPreloadImage ) == 'function' ) { FMCPreloadImage( '../../../SkinSupport/DropdownOpen.png' ); }" class="MCDropDownIcon" />DROPDOWNHOTSPOT TEXT HERE</a>
     </div>
     <div class="MCDropDownBody_0" id="MCDropDownBody_4000055646_1" style="display: none;">
                   <p>DROPDOWNBODY CONTENT HERE</p>
     </div>
</div>
That javascript would have to
1. find all dropdown divs in the topic (LOOP, find it by class)
2. go into each one of those divs and retrieve the id of the dropdownhotspot
3. find the dropdownbody div
4. find the corresponding closing tag (</div>).
This step could turn out complicated if you have nested dropdowns or use divs inside dropdowns
5. insert the link right before the closing tag
The link would have to trigger a javascript that contains: Get the object with the id (step 2) and perform a "click" on it.

Ruwin wrote:Another useful thing would be having two buttons in the toolbar: one for opening all dropdowns and one for closing all dropdowns. Because if i have an opened dropdown and three closed ones, when i click the current toggle button, it first opens all the dropdowns and only at a second click it closes them.
As you can see above, the click on the hotspot triggers the javascript function FMCDropDown( this ). What you need are buttons that trigger a javascript with a parameter (custom toolbar buttons).
This is a script which should work for the IE only (the "document.all" is causing it) - you gotta change it to make it fit all browsers:

Code: Select all

 <script type="text/javascript">
<!--
function AllDDs(move)
{
   if (document.all)
   {
      var maximum = document.all.tags("div").length;
      var counter = 0;
      for (var counter =0;counter <maximum;counter ++)
      {
         if (document.all.tags("div")[counter].className == "MCDropDown_0")
         {
            if (document.all.tags("div")[counter].style.setAttribute)
            {
               if (move == "open")
               { document.all.tags("div")[counter].style.setAttribute("display", "block"); }
               if (move == "close")
               { document.all.tags("div")[counter].style.setAttribute("display", "none"); }
            }
         }
      }
   }
}
// -->
</script>
Inge____________________________
"I need input! - Have you got input?"
bdietz
Propeller Head
Posts: 16
Joined: Wed Oct 19, 2011 6:08 am

Re: Setting Drop-down Text to Open Expanded

Post by bdietz »

This is a pretty old thread. I was wondering if anyone knows if the ability to have drop-down text open expanded has been added to stylesheets somewhere in Flare?

Thank you
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Setting Drop-down Text to Open Expanded

Post by NorthEast »

bdietz wrote:This is a pretty old thread. I was wondering if anyone knows if the ability to have drop-down text open expanded has been added to stylesheets somewhere in Flare?

Thank you
No, nothing has changed since August, and there's nothing built-in to Flare.

If it's something you'd like to see, put in a feature request to MadCap.
hljanas
Propeller Head
Posts: 29
Joined: Mon Aug 27, 2012 8:38 am

Re: Setting Drop-down Text to Open Expanded

Post by hljanas »

Is the script that was written in the original topic usable in Flare 9? If not, where can I find an updated version? I am using WebHelp output.

Thanks!
Heather
MattyQ
Sr. Propeller Head
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Re: Setting Drop-down Text to Open Expanded

Post by MattyQ »

Hey, all,

This is not a perfect solution, but in the course of our documentation, we wanted to have a "Before You Begin" dropdown that opened automatically when the page was loaded. I created kind of a clunky script that was able to open a single instance of a specifically-named dropdown. This won't solve everybody's issue, but feel free to use the script if you have a similar issue. I apply this by adding the script to the bottom of our master page, but you could add it in individual topics. Code follows:

Code: Select all


// This section modifies the 'contains' selector to be case-insensitive. Don't change this.
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});


// This section creates a loop that will apply a class to each dropdown hotspot that contains certain text. You can replace 'before you begin' with whatever is in your hotspot. Make sure to use single quotes, as I have below. You can change the name of the class in the "addClass" step, too, but you would need to change it throughout the rest of the script, too. Unless you have an existing BeforeYouBegin class in your stylesheet, I'd just leave it.
var beYoBe = $( ".MCDropDownHotSpot:contains('before you begin')" );
beYoBe.each(function() {
	$( this ).addClass( "BeforeYouBegin" );
});

// This creates a function which will click on the first instance of the Before You Begin dropdown. Only modify this if you changed the data in the addClass part above.
openBYB = function() { 
	var tog = document.getElementsByClassName("BeforeYouBegin")[0];
	tog.click();
};

// Creates empty variable toggleBYB.
var toggleBYB;

// This creates another function called delayedToggle, which clicks on the element after a quarter of a second.
function delayedToggle() {
	toggleBYB = window.setTimeout(openBYB, 250);
}

// Runs (calls) the delayedToggle function.
delayedToggle();
I'm not super Javascript savvy, but if you have issues with this script, you can let me know and I'll try to resolve them. This implementation utilizes a combination of jquery and javascript, which should both be automatically included by Flare 10 (I haven't tested this on earlier versions). I also use a newer version of JQuery than MadCap does, so there may be some loss of functionality there. Again, feel free to let me know.

EDIT: You can remove the comment lines from the script (prefixed by //)
shannong
Propeller Head
Posts: 17
Joined: Thu Sep 11, 2014 9:24 am

Re: Setting Drop-down Text to Open Expanded

Post by shannong »

MattyQ wrote:Hey, all,

This is not a perfect solution, but in the course of our documentation, we wanted to have a "Before You Begin" dropdown that opened automatically when the page was loaded. I created kind of a clunky script that was able to open a single instance of a specifically-named dropdown. This won't solve everybody's issue, but feel free to use the script if you have a similar issue. I apply this by adding the script to the bottom of our master page, but you could add it in individual topics. Code follows:

Code: Select all

(Matt's original code from the post just above this one)
I'm not super Javascript savvy, but if you have issues with this script, you can let me know and I'll try to resolve them. This implementation utilizes a combination of jquery and javascript, which should both be automatically included by Flare 10 (I haven't tested this on earlier versions). I also use a newer version of JQuery than MadCap does, so there may be some loss of functionality there. Again, feel free to let me know.

EDIT: You can remove the comment lines from the script (prefixed by //)
I just tested this approach in our Flare 11.1.0 project (HTML5 TopNav) and it works perfectly, but with ONE HUGE CAVEAT!

Our use case was enable our expression of minimalist, EPPO, and progressive disclosure principles for task topics by auto-expanding only dropdowns named "Procedure", while keeping any descendant dropdowns inside "Procedure" collapsed. (We hide all detail for top-level steps inside 2nd-level dropdowns, which makes it easy to skim the main flow of a procedure and drill into complex detail for a specific step only when desired.)

I implemented this approach as follows (and found an interesting Flare bug in the process, which I'll explain how to work around further down in this post):
  1. I created a new folder named "Scripts" inside of //Content/Resources.
  2. I created a text file (with vanilla Windows Notepad) named DropdownHandler.txt in that new folder, and pasted in your code.
  3. I replaced the one string specifying the content to act on from 'before you begin' to 'procedure' (and did not remove any comments--I even added a few comments of my own).
  4. In Windows Explorer, I renamed the file as DropdownHandler.js.
  5. I opened the master page used for all our HTML5 TopNav targets, placed my cursor at the end of the body (just beneath the topic body proxy), and used Insert > Script to link to the DropdownHandler.js script.
You cannot see the effect of this script when using the in-Flare preview feature. Instead, you must build a target to see the script in action.

The beauty of your approach is that you need only one script in one place, and it's implemented through the master page. By placing the script at the bottom of the master page's body, you see a big obvious script icon in your master page to remind you (years later) to check it if some future upgrade breaks the script. (This script would be effectively invisible if you placed it in the "cleaner" HEAD element.)


NOW FOR THE BUG/CAVEAT...

It turns out that in Flare 11.1.0 (and probably earlier versions too), you MUST NOT attempt to open the DropdownHandler.js file inside of Flare itself! If you do so, Flare changes the encoding or charset in some way that effectively BREAKS the script. It will look fine in Flare's text editor. No script/syntax warnings will be reported. In built targets, you can examine the source code and the .js file itself through your browser, and everything looks just fine. But the script will NOT work.

The only way to fix this problem if it occurs (someone unintentionally opens the .js file inside of Flare and the script suddenly "breaks") is to work outside of Flare itself to perform the following steps:
  1. Using Windows Explorer, rename the now-broken file.
  2. Use vanilla Windows Notepad to create a new .txt file with the original name.
  3. Copy-paste the content from the broken, renamed file into the new .txt file and save it.
  4. Use Windows Explorer to rename the new file with a .js extension.
Note that you can safely open and edit a GOOD version of this .js file in NotePad++ (as long as you don't mess with the original encoding set by Windows Notepad).

Also note that if the file becomes "broken" due to someone opening it in Flare, no amount of attempting to use Notepad++ to convert the encoding back to vanilla UTF-8 will work. Only creating it completely from scratch in vanilla Notepad (or possibly through Notepad++; I haven't tried this path) will fix the script when Flare breaks it.

I don't know why Flare has this bizarre bug, but there ya go. Caveat Scriptor.

Here's a screenshot of what our implementation makes a Task topic look like when first opened:

Image
MattyQ
Sr. Propeller Head
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Re: Setting Drop-down Text to Open Expanded

Post by MattyQ »

Hi, all,

Somewhere along in this thread, someone was looking for code that expanded all dropdowns in a topic. I was recently doing some code refactoring and wanted to pass this on. If you want to make all dropdowns in a topic start expanded, just use the following code:

Code: Select all

function clickDrop() { $( "a.dropDownHotspot" ).trigger( "click" ); }
var clickTimer = window.setTimeout(clickDrop, 250);
If you want to change how long the pause is before the dropdowns are opened, change the 250 in the second line. This number is in milliseconds (the current code opens dropdowns after a quarter of a second).
kerimucci
Propeller Head
Posts: 59
Joined: Thu Nov 02, 2017 3:38 am

Re: Setting Drop-down Text to Open Expanded

Post by kerimucci »

Hello.
I am trying to make my dropdowns open expanded, and I tried the method using Matt's script, but sadly this isn't working for me. All of my dropdowns start with "How to ...", so I changed the script to look for this in the hotspot.
These are old posts, so I am wondering if there is an easier way to get this working?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Setting Drop-down Text to Open Expanded

Post by Psider »

If you run the script without any changes it should work. No need to change anything in it.
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Setting Drop-down Text to Open Expanded

Post by kathryngz »

When I run the script, it scrolls down nearly to the bottom of the page. The script is at the top of the topic (in the <head> tags). Any idea how to prevent this?
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Setting Drop-down Text to Open Expanded

Post by kathryngz »

Following up on my post above: I tried using JavaScript to blur the last selected element (I assume it was selected because it was "clicked" by the script). But I couldn't get it to blur, and hence couldn't get the page to scroll to the top.

But that failure led me to another solution that seems to work very well. It's based on a script earlier in this thread (I think, or maybe another one--I've been reading several trying to solve this problem!). It essentially uses jQuery to change classes and attributes so all dropdown hotspots are in an open state:

Code: Select all

function clickDrop() {
$("div.MCDropDownBody").css("display", "block");
$("div.MCDropDown").removeClass("MCDropDown_Closed");
$("div.MCDropDown").addClass("MCDropDown_Open");
$("div.MCDropDown").attr("data-mc-state","open");}
var clickTimer = window.setTimeout(clickDrop, 250);
Maybe this solution will be helpful to someone.

Kathryn
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Setting Drop-down Text to Open Expanded

Post by NorthEast »

For the sake of completeness, you probably also want to handle the aria attribute (used for accessibility):

Code: Select all

$("a.MCDropDownHotSpot").attr("aria-expanded","true");
Also bear in mind that this is only for dropdowns - you'd need additional code to handle togglers and expanding text in the same way.
Alan at jjj
Jr. Propeller Head
Posts: 7
Joined: Mon Jan 24, 2022 4:49 am

Re: Setting Drop-down Text to Open Expanded

Post by Alan at jjj »

I am grateful to kathryngz & NorthEast for their code above, however, I did have problems getting it to work when I enclosed it in the jQuery recommended $(document).ready() call to wait for the page to fully load:

Code: Select all

$(document).ready( function() {

	<your code>   //***DIDN'T WORK***

});
Almost in frustration I tried a double-nested call:

Code: Select all

$(document).ready( function() {
	$(document).ready( function() {

		<your code>   //Works!

	});
});
and to my genuine surprise, it worked! I have no idea how the double $(document).ready() call is allowing it to work. I hope this little nugget of information is beneficial to others.


Auto Opening a Single Madcap Dropdown on Loading
For my application, however, I didn't want to open all dropdowns - just a single dropdown amongst a page of multiple dropdowns. I've shared my solution below.

The only overhead necessary is to insert a Flare Bookmark (Insert > Bookmark) prior to any dropdown that you wish to selectively open. You then open the page with the required bookmark at the end of the URL to selectively open that single dropdown. Opening the page without a bookmark will leave all dropdowns closed. See the demo page contents for more information.

In order for the jQuery script to be used by multiple topics, it is in an external file called open_drop_down.js - just place it in a convenient place (Resources/Scripts?) and include a link to it in each topic's <head> section.


open_drop_down.js

Code: Select all

// jQuery script: open_drop_down.js by alanatjjj@gmail.com 15-AUG-2023.
function openMatchedDropDown() {
//opens the MadCap:dropDown (source file) / div.MCDropDown (output file) that follows the matching bookmark

	const urlBookmark = document.location.hash.slice(1);   //the topic's URL bookmark (if called with one). slice removes the initial "#" from the bookmark.

	if ( urlBookmark.length > 0 ) {
		const parentTag = $( "a[name='" + urlBookmark + "']" ).parent();   //search for the matching internal bookmark's parent <p> tag

		if ( parentTag.length == 1 ) {
			const dropDown = parentTag.next( "div.MCDropDown" );   //the dropdown's elements follow the <p> tag
			const dropDownHotSpot = dropDown.find( "span.MCDropDownHead > a.MCDropDownHotSpot" );
			const dropDownBody = dropDown.children( "div.MCDropDownBody" );

			//NOTE: different order to above evaluations:
			dropDownBody.css("display", "block");
			dropDown.removeClass("MCDropDown_Closed").addClass("MCDropDown_Open").attr("data-mc-state", "open");
			dropDownHotSpot.attr("aria-expanded", "true");
		}
	}
	
}

DemoAutoOpenDropDown.htm

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:searchable="False">
    <head>
        <script src="open_drop_down.js">
        </script>
    </head>
    <body style="background-color: white; color: black;">
        <h1>Demo of Selectively Auto Opening a Madcap DropDown on Loading</h1>
        <p>This topic contains 3 Madcap Dropdowns. The topic may be opened without opening any dropdowns, or by selectively opening 1 of the 3 dropdowns. This is achieved by specifying an appropriate bookmark in the URL as indicated below:</p>
        <ul>
            <li>
                <p>Do not auto open a dropdown: <a href="DemoAutoOpenDropDown.htm" target="JjjDocsDemoautoopen_Open"><b>DemoAutoOpenDropDown.htm</b></a></p>
            </li>
            <li>
                <p>Auto open dropdown 1: <a href="DemoAutoOpenDropDown.htm#Red" target="JjjDocsDemoautoopen_Open"><b>DemoAutoOpenDropDown.htm#Red</b></a></p>
            </li>
            <li>
                <p>Auto open dropdown 2: <a href="DemoAutoOpenDropDown.htm#Green" target="JjjDocsDemoautoopen_Open"><b>DemoAutoOpenDropDown.htm#Green</b></a></p>
            </li>
            <li>
                <p>Auto open dropdown 3: <a href="DemoAutoOpenDropDown.htm#Blue" target="JjjDocsDemoautoopen_Open"><b>DemoAutoOpenDropDown.htm#Blue</b></a></p>
            </li>
        </ul>
        <p>Although it's probably more normal to link from another topic.</p>
        <p>&#160;</p>
        <h2>Required Setup</h2>
        <ol>
            <li>
                <p>Before each dropdown you wish to open, insert a Flare bookmark (<b>Insert &gt; Bookmark</b>).</p>
            </li>
            <li>
                <p>Add <code><b>&lt;script src="open_drop_down.js"&gt;&lt;/script&gt;</b></code> in the <code><b>&lt;head&gt;</b></code> section. Include the path to wherever you've placed the file.</p>
            </li>
            <li>
                <p>Add a call to <code><b>openMatchedDropDown();</b></code> in a doubly-nested <code><b>$(document).ready()</b></code> section.</p>
            </li>
        </ol>
        <p>&#160;</p>
        <p>&#160;</p>
        <h2>Demonstration body text follows:</h2>
        <p>&#160;</p>
        <h1>Spectrum</h1>
        <p>The spectrum, a captivating display of colours stretching across the electromagnetic spectrum, is a visual symphony that unveils the true nature of light. Spanning from the longest radio waves to the shortest gamma rays, the spectrum encompasses a breathtaking array of wavelengths, each carrying its distinct energy and properties. At the heart of this phenomenon is the visible spectrum, where the colours of the rainbow - from the regal red to the vibrant violet - gracefully blend and transition. This portion of the spectrum is a testament to the intricacies of light's interaction with matter, revealing the profound connections between physics, optics, and our perception of the world.</p>
        <p>The study of the spectrum has transcended mere aesthetics, paving the way for revolutionary discoveries in various scientific disciplines. In spectroscopy, scientists harness the spectrum's unique fingerprinting capability to analyse the composition and properties of materials, whether by identifying the elemental makeup of distant stars or unveiling the molecular intricacies of unknown substances. Moreover, the spectrum's portrayal of light as both particle and wave set the foundation for quantum mechanics, reshaping our understanding of the fundamental nature of reality. From the vivid hues of a sunset to the enigmatic glow of distant galaxies, the spectrum is a bridge between the ethereal and the tangible, an emblem of the wondrous interplay between light and the universe it traverses.</p>
        <p>The colours of the rainbow, typically observed in order from the outer edge to the inner edge, are: Red, Orange, Yellow, Green, Blue, Indigo, Violet. These colours form the acronym "ROYGBIV", from which the mnemonic "Richard Of York Gave Battle In Vain" helps one to remember the order of the colours. This sequence of colours is a result of the dispersion of sunlight through water droplets in the atmosphere, creating a beautiful natural phenomenon.</p>
        <p>&#160;</p>
        <p><a name="Red"></a>
        </p>
        <MadCap:dropDown>
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>What is Red?</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p><span style="color: red;">Red, a colour that commands attention and ignites passions, is a powerful and dynamic presence in the realm of hues. From the fiery intensity of scarlet to the subdued warmth of maroon, red spans a spectrum of emotions and meanings. Symbolising both love and power, red is a colour that elicits strong reactions and holds a profound cultural significance. It can evoke feelings of energy, excitement, and determination, stirring the spirit much like a blazing flame. Red often signifies courage, strength, and urgency, drawing focus and driving action. Whether embodying the heartbeat of life or the fervour of revolution, red stands as a vivid reminder of the intensity that colours our human experience and shapes our deepest aspirations.</span>
                </p>
                <p><span style="color: red;">Here's an interesting <a href="https://en.wikipedia.org/wiki/Red_rain_in_Kerala" target="JjjDocsDemoautoopen_Wikipedia"><b>Red Fact</b></a>.</span>
                </p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
        <p>&#160;</p>
        <p><a name="Green"></a>
        </p>
        <MadCap:dropDown>
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>What is Green?</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p><span style="color: green;">Green, a colour abundant in nature's tapestry, is a symbol of growth, vitality, and harmony. Like the lush foliage that carpets the earth and the tender shoots of emerging life, green radiates a refreshing energy that rejuvenates the senses. Its diverse shades, ranging from the vibrant lime to the deep emerald, encompass a spectrum of meanings. Green is often linked to renewal and balance, mirroring the cycle of seasons and the equilibrium of ecosystems. It has the remarkable ability to evoke a sense of calm and connection to the living world around us. Whether portraying the serenity of a forest glade or the promise of new beginnings, green serves as a reminder of nature's resilience and the ever-present potential for growth.</span>
                </p>
                <p><span style="color: green;">Here's an interesting <a href="https://en.wikipedia.org/wiki/Chlorophyll_fluorescence" target="JjjDocsDemoautoopen_Wikipedia"><b>Green Fact</b></a>.</span>
                </p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
        <p>&#160;</p>
        <p><a name="Blue"></a>
        </p>
        <MadCap:dropDown>
            <MadCap:dropDownHead>
                <MadCap:dropDownHotspot>What is Blue?</MadCap:dropDownHotspot>
            </MadCap:dropDownHead>
            <MadCap:dropDownBody>
                <p><span style="color: #1e90ff;">Blue, a serene and tranquil hue, has an undeniable presence in the spectrum of colours. As if capturing the essence of calm waters and boundless skies, blue evokes a sense of depth and vastness. Its varying shades, from the soft whisper of baby blue to the intense richness of navy, offer a broad palette of emotions to choose from. Blue is often associated with a feeling of tranquillity, clarity, and stability. It has the remarkable ability to inspire a sense of peacefulness and introspection, gently guiding thoughts toward the profound and the infinite. Whether mirroring the reflective surface of a still lake or the grandeur of an open horizon, blue stands as a timeless reminder of the expansive beauty that exists within both the natural world and the human psyche.</span>
                </p>
                <p><span style="color: #1e90ff;">Here's an interesting <a href="https://en.wikipedia.org/wiki/Blue_Fugates" target="JjjDocsDemoautoopen_Wikipedia"><b>Blue Fact</b></a>.</span>
                </p>
            </MadCap:dropDownBody>
        </MadCap:dropDown>
        <p>&#160;</p>
        <address>Credit: demonstration body text courtesy <a href="https://chat.openai.com/" target="JjjDocsDemoautoopen_Chatgpt">ChatGPT</a>.</address>
        <p>
            <script type="text/javascript">/*<![CDATA[*/
				
				$(document).ready( function() {
					$(document).ready( function() {
					
						//external function: search for an internal bookmark that matches the URL bookmark to automatically open the following MCDropDown.
						openMatchedDropDown();
						
					});
				});
				
			/*]]>*/</script>
        </p>
    </body>
</html>
Alan at jjj
Jr. Propeller Head
Posts: 7
Joined: Mon Jan 24, 2022 4:49 am

Re: Setting Drop-down Text to Open Expanded

Post by Alan at jjj »

Update to my code snippets above:
The actual jQuery 3.0+ recommended syntax for .ready() doesn't even include the text ".ready()" - so to call an anonymous function, it is now: $(function() { <your code> }); . Ref: https://api.jquery.com/ready/#ready-han ... ecommended .
Post Reply