JAVASCRIPT
Add this to the <head> tag of the layout file:
<!--- prototype and scriptaculous for Expand a Div and Video Popup --->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js"></script><!--- expandadiv --->
<script type="text/javascript" src="/includes/expandadiv/expandadiv.js"></script>
SAMPLE CSS
When creating the CSS for the Expand-a-Div, create a file called "_expandadiv.css" under the site, and include it in the layout file.
Here is the CSS used on this page for it's Expand-a-Div:
#expandadiv_container, #expandadiv_1, #expandadiv_2 {
position: relative;
width:100%;
margin: 0;
height: 235px; /* height of the ExpandADiv */
}
#expandadiv_bg_1, #expandadiv_bg_2 {
width:100%;
height: 235px; /* height of the ExpandADiv */
margin: 0;
background: #756D62 url(../images/layouts/expandadiv_main_bg.png) repeat-x center bottom;
}
#expandadiv_dropdown_1 {
width: 950px;
height: 194px;
padding:16px;
margin: 0 auto;
font-family: "Arial Rounded MT Bold";
font-weight: bold;
font-size: 11px;
color: #fff;
background: url('../images/layouts/body_bg.jpg');
}
#expandadiv_dropdown_1 h4 {
margin-top: 0;
}
#expandadiv_left_1 {
float: left;
text-align: left;
}
#expandadiv_left_1 form {
margin: 0;
}
#expandadiv_right_1 {
float: left;
text-align: left;
margin-left: 10px;
}
BASIC
The basic div structure for an expand-a-div is as follows:
<div id="expandadiv_container" style="display: none;">
<div id="expandadiv_1" style="display: none;">
<div id="expandadiv_bg_1">
<div id="expandadiv_dropdown_1">
</div>
</div>
</div>
</div>
And then somewhere on the page is the link that activates it:
<a href="#" onclick="swapDropDowns('expandadiv_1'); return false;">Contact</a>
EXAMPLE
You can add more than one content area by adding another block inside "expandadiv_container":
<div id="expandadiv_container" style="display: none;">
<div id="expandadiv_1" style="display: none;">
<div id="expandadiv_bg_1">
<div id="expandadiv_dropdown_1">
</div>
</div>
</div>
<div id="expandadiv_2" style="display: none;">
<div id="expandadiv_bg_2">
<div id="expandadiv_dropdown_2">
</div>
</div>
</div>
</div>
And then add another button to control that one:
<a href="#" onclick="swapDropDowns('expandadiv_1'); return false;">Contact</a> |
<a href="#" onclick="swapDropDowns('expandadiv_2'); return false;">Ministries</a>
EXAMPLE 2
For our typical contact form found in the Expand-a-Div, there is an extra piece that needs to be placed in the layout file; the Coldfusion that processes the form submission:
<!---------
BEGIN CONTACT FORM COLDFUSION
---------->
<cfparam name="Attributes.contact_fldPost" default="0">
<cfparam name="Attributes.contact_formSubmit" default="0">
<cfparam name="Attributes.contact_formNoSubmit" default="">
<cfparam name="Attributes.contact_fldPhone" default="">
<cfparam name="Attributes.contact_fldName" default="">
<cfparam name="Attributes.contact_fldEmail" default="">
<cfif val(Attributes.contact_fldPost) and not len(Attributes.contact_formNoSubmit) and not len(Attributes.contact_fldPhone) and not len(Attributes.contact_fldName) and not len(Attributes.contact_fldEmail)>
<cfparam name="Attributes.contact_fldN" default="">
<cfparam name="Attributes.contact_fldE" default="">
<cfparam name="Attributes.contact_fldNote" default="">
<cfparam name="Attributes.contact_fldTo" default="[email protected]">
<!--- EMAIL TO --->
<cfif not IsValid("email", Attributes.contact_fldTo)>
<cfset Attributes.contact_fldTo = "[email protected]">
</cfif>
<cfset request.email_to = Attributes.contact_fldTo>
<cfset request.email_from = request.email_to>
<cfoutput>
<cfsavecontent variable="request.contact_body">
Someone has submitted the Contact Us form:
Name: #Attributes.contact_fldN#
Email: #Attributes.contact_fldE#
Message:
#Attributes.contact_fldNote#
</cfsavecontent>
</cfoutput>
<cfif IsValid("email", Attributes.contact_fldE)>
<cfset request.email_from = Attributes.contact_fldE>
</cfif>
<cfmail to="#request.email_to#" from="#request.email_from#" subject="">#request.contact_body#</cfmail>
<cfset Attributes.contact_formSubmit = 1>
</cfif>
<!---------
END CONTACT FORM COLDFUSION
---------->
The Expand-a-Div containing the form looks like this:
<!--- ExpandADiv: HTML --->
<div id="expandadiv_container"<cfif not val(Attributes.contact_formSubmit)> style="display: none;"</cfif>>
<div id="expandadiv_1"<cfif not val(Attributes.contact_formSubmit)> style="display: none;"</cfif>>
<div id="expandadiv_bg_1">
<!--- spacer div --->
<div style="position: relative; height: 10px;"></div>
<div id="expandadiv_dropdown_1">
<cfparam name="Attributes.contact_formSubmit" default="0">
<!---- left div --->
<div id="expandadiv_left_1">
<form action="<cfoutput>#variables.basehref#index.cfm/PageID/#Attributes.pageid#/index.html</cfoutput>" method="post">
<h4 class="contact_Header">Drop Us a Note</h4>
<div style="float:left; text-align:left;">
<p>Recipients:<br />
<select name="contact_fldTo" class="formFields_pri" autocomplete="off">
<option value="[email protected]">General Queries</option>
<option value="[email protected]">Membership Ministries</option>
<option value="[email protected]">Men's Ministries</option>
<option value="[email protected]">Women's Ministries</option>
<option value="[email protected]">Youth Ministries</option>
<option value="[email protected]">Children's Ministries</option>
<option value="[email protected]">Pastoral Needs</option>
</select>
<br /><br />
<!---- FAKE FIELDS FOR SPAM BOTS ---->
<div id="contactPhone" style="display: none;">
<input type="text" name="contact_fldName" value="" autocomplete="off">
<input type="text" name="contact_fldPhone" value="" autocomplete="off">
</div>
<div id="contactEmailF">
Email:<br>
<input type="text" name="contact_fldEmail" value="" autocomplete="off">
</div>
<!---- END FAKE FIELDS ---->
Name:<br />
<input type="text" name="contact_fldN" value="" class="formFields_pri" autocomplete="off" />
<br /><br />
Email:<br />
<input type="text" name="contact_fldE" value="" class="formFields_pri" autocomplete="off" />
</p>
<!--- CONFIRMATION TEXT --->
<cfif val(Attributes.contact_formSubmit)><p style="color: #000;"><b>Thank you for the email!</b></p></cfif>
</div>
<div style="float:left;margin-left:10px; width: 280px; padding-right: 15px;">
<div style="text-align: left;">
Note:<br />
<textarea name="contact_fldNote" class="formFields_pri" style="width: 275px; height: 105px;"></textarea><br />
<div style="width:100%; text-align: right">
<input type="hidden" name="contact_fldPost" value="1" autocomplete="off" />
<input type="hidden" name="contact_formNoSubmit" value="" autocomplete="off" />
<input type="submit" value="send" style="font-size: 11px; right: 0;" class="formFields_pri" />
</div>
</div>
</div>
</form>
</div>
<!---- right div --->
<div id="expandadiv_right_1" style="">
<h4 class="contact_Header">Address</h4>
<p>
2335-114 Presidential Dr.<br>
Durham, NC 27703<br>
(919) 383-7100
</p>
</div>
<div style="float:left; text-align:left; margin-left:10px;">
<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2335+Presidential+Dr.+Durham,+NC+27703&sll=35.927824,-78.841753&sspn=0.008862,0.019119&g=2335+presidential+dr.+durham,+nc&ie=UTF8&ll=35.930239,-78.841796&spn=0.008861,0.019119&z=16&iwloc=A"><img src="images/layouts/contact_map.jpg" border="0"/></a>
</div>
<div style="clear: both;"></div>
</div>
<!--- spacer div --->
<div style="position: relative; height: 15px;"> </div>
</div>
</div>
</div>
EXAMPLE 3
Some sites were built to where if there are two Expand-a-Divs, when one is activated the button for the other disappears. To acheive this, you can use the following code on the buttons:
<div id="expandadiv_buttons">
<div id="expandadiv_btn_1" style="float: left;">
<a href="#" onclick="swapDropDowns('expandadiv_1', 'expandadiv_btn_2'); return false;"><img src="images/layouts/drop_down_button.jpg" border="0" /></a>
</div>
<div id="expandadiv_btn_2" style="float: right;">
<a href="#" onclick="swapDropDowns('expandadiv_2', 'expandadiv_btn_1'); return false;"><img src="images/layouts/drop_down_button_ministries.jpg" border="0" /></a>
</div>
</div>
In this example, there are now divs that contain the control links (images in this case) which control the Expand-a-Divs. Each has an ID that will be used in the Javascript call.
In the Javascript call, there are two arguments; The Expand-a-Div that is being activated and the control link that is being hidden. The rule is if you're activating Div 1, you're hidding Div 2's control link (really we're hiding the Div that is containing the control link).
Site Index Example
For Expand-a-divs containing a Site Index, all that's need is the following code:
<cfset column_row_max = 14>
<cfinclude template="#request.dir_globals#/dsp_sitemap.cfm">
This will include the page query needed and outputs the HTML of the site index. You can then style the resulting HTML using CSS as needed. Set "column_row_max" to the number of pages desired per column of the site index.
subpages
- Auto Display Page Title
- Blog
- CSS Animations
- Drop Down Menu
- Email Subscription
- Google Fonts
- Google Maps API
- Header Videos
- Instagram Feed
- Layout Override
- On-Page Nav Scrolling
- Onecast / Latest Sermon
- Page Content
- Page Content Edit Buttons
- Parallax Scrolling
- Per Page SEO
- Permalink Conversion
- Popup Box
- Rotator / Event Box
- Sidebar Pop-out
- Site Search
- Slider
- Social Media Icons
- Split Navigation
- Staff Module
- Subpage Module
- TinyMCE Content Editor
- Twitter Feed
- Deprecated Add Ons