Dropdown Action with HTML-CSS-Java

[agambina]

Hello,

I have 2 unique style needs for Madcap|Dropdown. I've tried using separate stylesheets and found it's married to MainStyles.css. I've ventured down the "Make my Own Dropdown" road and am stuck. Flare's Editor is nodding "no" to the HTML. Between the HTML + CSS + Java, I'm afraid this effort is off road. I plea to the whip-smart community members to help me move forward. Here's what I have:

HTML
<div class="faq-container2">
<h2 class="faq">Administration</h2>
<div id="dropdown-content">
<button class="icon" type="button" onClick="GoDropDown()" />Test
<div id="dd-question" class="dropdown-content">
How does an employee get access?
</div>
</div>
<div class="dropdown-content">
<button class="icon" type="button" onClick="GoDropDown()" />Test
<div id="dd-answer" class="dropdown-content">
<p>Human Resources sends an email requesting access for the employee's role. Once you have configured access, reply to all parties involved with employee set-up.</p>
</div>
</div>
<script type="text/javascript" src="../scripts/dropdown.js">
</script>
Javascript
* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function GoDropDown() {
document.getElementById("dropdown-content).classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.icon')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
CSS
.icon {
font-family: FontAwesome;
content: "\f078";
color: #95000f;
padding-right: 6px;
font-size: 16px;
cursor: pointer;
}
.icon:hover, .iconfocus {
background-color: #19b9f3;
}
.dropdown-content {
position: relative;
display: inline-block;
}
#dd-question {
display: none;
position: absolute;
z-index: 1;
}
#dd-answer {
font-size: 11pt;
color: #5a6772;
padding: 10px;
}
Thank you!
Anet

[devjoe]

What exactly are you trying to achieve? The javascript comments suggest you want to close the dropdown if the user clicks anywhere outside it, which makes it sound like a popup rather than a dropdown.

[agambina]

I need to use the Dropdown capability in 2 different topics, each with unique Dropdown styles. I'm trying to mimic Madcap's Dropdown capability using HTML/Java/CSS.

[devjoe]

You can define classes on the MadCap-specific elements, like MadCap|dropDown.special to define a "special" class, and format each of them separately in the CSS. Flare will handle these appropriately for the output.

However, what you cannot do is define complex selectors involving the special elements, and that is particularly relevant for dropdown text since it has nested elements, all of which you might want to style. In order to do this, you need to find the elements these get turned into in the output and define the appropriate CSS to match that. The alternative is that you define classes on each element you need multiple styles for and apply them on each element, a pain if you have lots of these. If you are only applying different styles to one element, perhaps the dropDownBody, then you can define the classes there and it won't be extra work.

If you need some more flexibility in layout than the dropdown allows, then you can use the toggler. In this case, though, the elements are linked only by the name applied to the element(s) you are opening/closing (which you commonly want to put in a div for flexibility) and if you want to style both the button and the dropdown body separately, you will need to define and apply classes for both elements.

[agambina]

Hello,

Thank you for your response in describing the way to accomplish the style dilemma for Madcap|dropDown. Your solution simplified the process--and likely why my propellers are minuscule. Just wanted to illustrate how the Dropdown feature can be used in one instance with the Open/Close images and the other with no images (used FontAwesome icon instead). I used 3 o the 4 Dropdown styles to create unique styles (Add Selector), and then added the class to those Dropdown HTML tags. I found that the text string between the start/end tags for MadCap:dropDownHotspot was being styled by span.highlight. Inspector referred to this style as MadCap:dropDownHotspot:link which I could not find in the main stylesheet. I was able to match the properties to isolate the style being used and fortunately it wasn't part of the unique-use situation. Here's the HTML / CSS used to resolve my issue:

HTML
<MadCap:dropDown class="FAQ">
<MadCap:dropDownHead>
<MadCap:dropDownHotspot class="FAQ">How does an employee get access to XYZ System?</MadCap:dropDownHotspot>
</MadCap:dropDownHead>
<MadCap:dropDownBody>
<p>Human Resources sends an email requesting access for the employee's role. Once you have configured access, reply to all parties involved with employee set-up.</p>
</MadCap:dropDownBody>
</MadCap:dropDown>

CSS
I am only showing the Dropdown styles that were changed:

MadCap|dropDownHotspot.FAQ:hover
{
color: #5a6772;
font-size: 11pt;
}

MadCap|dropDown.FAQ
{
font-weight: 400;
font-size: 11pt;
font-family: Roboto;
font-color: #5a6772;
mc-closed-image: url('../Images/Assets/Icons/MainIcons/DropDownClosed.png');
mc-open-image: url('../Images/Assets/Icons/MainIcons/DropDownOpen.png');
left: 30px;
line-height: 1.2em;
margin-bottom: 20px;
}

MadCap|dropDownHead.FAQ
{
font-size: 11pt;
font-color: #1f427e;
left: 30px;
line-height: 1.2em;
margin-top: 20px;
}