Let me demonstrate what im trying to achieve here so here is a link:
http://www.mindseyemidlands.co.uk/notts_quality/info_resource/sideAccordionv3.php
source code for that
http://www.mindseyemidlands.co.uk/notts_quality/info_resource/accordion_source.htm
I'm trying to replicate this Javascript Accordion effect using PHP queries to populate the menu and the resulting information. So instead of 'first' 'second' and 'third'- a list of quality_names is queried and when you click the quality name the info relating to it 'expands' etc. I am almost there but due to lack of sleep I have hit a snag. The expansion part will not work:
http://www.mindseyemidlands.co.uk/notts_quality/info_resource/sideAccordionv4.php
here is my code (sorry for the length)
<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #333;
display: block;
font-weight: bold;
text-decoration: none;
}
a:hover{
background: #fff;
}
.tab h3{
color: #333;
padding: 3px;
font-size: 12px;
margin: 0 1px 1px 0;
text-align: center;
background: #6FB9E9;
}
h3{
margin: 0;
padding: 5px;
font-size: 14px;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
}
#wrapper{
width: 600px;
margin: 0 auto;
}
#left{
float: left;
width: 250px;
}
#right{
float: right;
width: 350px;
}
.tab{
color: #333;
padding: 3px;
margin: 0 1px 1px 0;
text-align: center;
background: #6FB9E9;
}
.stretcher{
background: #6FB9E9;
}
</style>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
//the main function, call to the effect object
/*
function init(){
var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
var toggles = document.getElementsByClassName('tab'); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 400, transition: fx.sineInOut}
);
//hash functions
var found = true; // if true, accordion starts closed on load else if false first one starts open on load
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling'); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
*/
function init(){
var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
var toggles = document.getElementsByClassName('tab'); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: true, height: true, duration: 400}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling'); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="left">
<div class="tab">
<?php
include("connect.php");
// array of quality names
$sql = "SELECT quality_name from qualityadmin ORDER BY quality_name";
$result = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row['quality_name'];
}
// loop through the quality names:
foreach($array as $value)
{
echo '<div class="tab"><h3><a href="quality_name=' . $value . '"></h3>' . strtoupper($value) . '</a> |</div>' . "\n";
}
// grab qualityname from URL
if (isset($_GET['quality_name']))
{
$qualityname = trim(strtolower($_GET['quality_name']));
}
// begin output here:
$dtld = array('http://', 'www.', '.com', '.edu', '.fr', '.org', '.eu', '.us', '.biz', '.net', '.cz', '.it', '.cc', '.ca', '.pdf','.html'); // Add other TLD items as needed
echo '
<div id="right">
<div id="content">
<div class="stretcher">';
echo '<h3>' . $row['quality_name'] .'</h3>';
echo'<p>
<table cellpadding="2" cellspacing="0" border="1" id="myTable" width="400px">
<tr>
<td class="heading" colspan="3">Quality Name</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td class="heading" colspan="4">Authority Body</td>
</tr>
<tr>
<td colspan="3">' . $row['authority_body'] . '</td>
</tr>
<tr>
<td class="heading">Address 1</td>
<td class="heading">Address 2</td>
<td class="heading">Town</td>
</tr>
<tr>
<td>' . $row['address1'] . '</td>
<td>' . $row['address2'] . '</td>
<td>' . $row['town'] . '</td>
</tr>
<tr>
<td class="heading">Postcode</td>
<td class="heading">Telephone</td>
<td class="heading">Email</td>
</tr>
<tr>
<td>' . $row['postcode'] . '</td>
<td>' . $row['telephone'] . '</td>
<td>' . $row['email'] . '</td>
</tr>
<tr>
<td class="heading" colspan="3">Website</td>
</tr>
<tr>
<tr>
<td colspan="3"><a href="'. ((strpos($row['website'], 'http://')===false)?'http://':'') . $row['website'] .'" target = "_blank">'. str_replace($dtld, '', $row['website']). '</a></td>
</tr>
<tr>
<td class="heading" colspan="3">Local Agency</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['local_agency'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">Contact</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['contact'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">What is it</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['what_is_it'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">Who and what does it apply to?</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['who_what_apply'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">How does it work?</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['how_work'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">What are the resource implications?</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['resource_implications'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">How do you meet the standards and get assessed?</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['how_meet_standards'] ).'</td>
</tr>
<tr>
<td class="heading" colspan="3">How widespread is it?</td>
</tr>
<tr>
<td colspan="3">' . nl2br( $row['widespread'] ) .'</td>
</tr>
<tr>
<td class="heading" colspan="3">What are the pros and cons?</td>
</tr>
<tr>
<td colspan="3">' . $row['pros_cons'] .'</td>
</tr>
<tr>
<td class="heading" colspan="3">What are the benefits?</td>
</tr>
<tr>
<td colspan="3">' . $row['benefits'] .'</td>
</tr>
</table>';
echo ' </div>
</div>
</div>
</div>';
?>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script><!-- InstanceEndEditable --></td>
<td></td>
</tr>
<tr>
<td height="495"> </td>
<td></td>
</tr>
</table>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
</div>
</body>
<!-- InstanceEnd --></html>
