Setting Drop-down Text to Open Expanded
Hi Gary...
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
-
- Sr. Propeller Head
- Posts: 222
- Joined: Fri Sep 12, 2008 1:57 am
Re: Setting Drop-down Text to Open Expanded
'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>
<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>
Re: Setting Drop-down Text to Open Expanded
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
Re: Setting Drop-down Text to Open Expanded
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.
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
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
-
- Sr. Propeller Head
- Posts: 222
- Joined: Fri Sep 12, 2008 1:57 am
Re: Setting Drop-down Text to Open Expanded
Yes, that worked - thanks.
Re: Setting Drop-down Text to Open Expanded
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!
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!
-
- Propeller Head
- Posts: 13
- Joined: Wed Aug 29, 2012 11:38 am
Re: Setting Drop-down Text to Open Expanded
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.
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:
And this one will open all togglers:Code: Select all
<script> $(window).load(function() { $(".MCDropDownHotSpot").click(); }); </script>
These will work in the output, but not in preview mode.Code: Select all
<script> $(window).load(function() { $(".MCToggler").click(); }); </script>
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.
Re: Setting Drop-down Text to Open Expanded
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.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?
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>
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.
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).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.
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?"
"I need input! - Have you got input?"
Re: Setting Drop-down Text to Open Expanded
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
Thank you
Re: Setting Drop-down Text to Open Expanded
No, nothing has changed since August, and there's nothing built-in to Flare.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
If it's something you'd like to see, put in a feature request to MadCap.
Re: Setting Drop-down Text to Open Expanded
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
Thanks!
Heather
Re: Setting Drop-down Text to Open Expanded
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:
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 //)
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();
EDIT: You can remove the comment lines from the script (prefixed by //)
Re: Setting Drop-down Text to Open Expanded
I just tested this approach in our Flare 11.1.0 project (HTML5 TopNav) and it works perfectly, but with ONE HUGE CAVEAT!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:
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.Code: Select all
(Matt's original code from the post just above this one)
EDIT: You can remove the comment lines from the script (prefixed by //)
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):
- I created a new folder named "Scripts" inside of //Content/Resources.
- I created a text file (with vanilla Windows Notepad) named DropdownHandler.txt in that new folder, and pasted in your code.
- 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).
- In Windows Explorer, I renamed the file as DropdownHandler.js.
- 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.
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:
- Using Windows Explorer, rename the now-broken file.
- Use vanilla Windows Notepad to create a new .txt file with the original name.
- Copy-paste the content from the broken, renamed file into the new .txt file and save it.
- Use Windows Explorer to rename the new file with a .js extension.
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:
Re: Setting Drop-down Text to Open Expanded
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:
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).
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);
Re: Setting Drop-down Text to Open Expanded
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?
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?
Re: Setting Drop-down Text to Open Expanded
If you run the script without any changes it should work. No need to change anything in it.
Re: Setting Drop-down Text to Open Expanded
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?
Re: Setting Drop-down Text to Open Expanded
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:
Maybe this solution will be helpful to someone.
Kathryn
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);
Kathryn
Re: Setting Drop-down Text to Open Expanded
For the sake of completeness, you probably also want to handle the aria attribute (used for accessibility):
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.
Code: Select all
$("a.MCDropDownHotSpot").attr("aria-expanded","true");
-
- Jr. Propeller Head
- Posts: 7
- Joined: Mon Jan 24, 2022 4:49 am
Re: Setting Drop-down Text to Open Expanded
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:
Almost in frustration I tried a double-nested call:
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
DemoAutoOpenDropDown.htm
Code: Select all
$(document).ready( function() {
<your code> //***DIDN'T WORK***
});
Code: Select all
$(document).ready( function() {
$(document).ready( function() {
<your code> //Works!
});
});
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> </p>
<h2>Required Setup</h2>
<ol>
<li>
<p>Before each dropdown you wish to open, insert a Flare bookmark (<b>Insert > Bookmark</b>).</p>
</li>
<li>
<p>Add <code><b><script src="open_drop_down.js"></script></b></code> in the <code><b><head></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> </p>
<p> </p>
<h2>Demonstration body text follows:</h2>
<p> </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> </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> </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> </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> </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>
-
- Jr. Propeller Head
- Posts: 7
- Joined: Mon Jan 24, 2022 4:49 am
Re: Setting Drop-down Text to Open Expanded
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 .
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 .