Got a strange one if anyone can help?
Very basic page with an accordion
It doesn't have the viewport meta tag as the site wants to display full sized when viewed on a mobile, i.e it looks really small and you have to do a lot of pinch zoom
On a mobile, the page renders as you would expect on page load, however, when I click on a title to expand the accordion, all the text goes larger?
Any ideas?
http://www.darrencousins.com/lab/accordion/
HTML
<!doctype html>
<head>
<meta charset="utf-8">
<title>Accordion</title>
<link rel="stylesheet" href="assets/css/global.css" />
</head>
<body>
<div class="pageContainer">
<h1>Accordion text zoom problem</h1>
<div class="accordion">
<div class="accordionPanel">
<div class="titleHeader">
<p>Title One</p>
</div>
<div class="contentDetails">
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
</div>
</div>
<div class="accordionPanel">
<div class="titleHeader">
<p>Title Two</p>
</div>
<div class="contentDetails">
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
<p><strong>Sub-Section Title One</strong></p>
<p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="assets/js/global.js"></script>
</body>
CSS
html, body {margin:0; padding:0; font-family:"Arial", sans-serif}
html {font-size:62.5%}
body {font-size:1.2em;}
.pageContainer {width:960px;}
p {margin:0; padding:0; font-size:1.2em;}
/* Accordion */
.accordion {margin:0; padding:0; border:1px solid red}
/* Title */
.accordion .titleHeader {background:#00a4dd; color:white; position:relative; margin:0 0 3px; cursor:pointer;}
.accordionPanel.active .titleHeader {background:#00a4dd}
.accordion .contentDetails {display:none; margin:0 0 3px; padding:20px 10px; background:white;}
/* END Accordion */
jQuery
$(document).ready(function()
{
/*-----------*/
/* ACCORDION */
/*-----------*/
$('.accordionPanel .titleHeader').on('click', function()
{
$(this).parent().toggleClass('active');
$(this).siblings('.contentDetails').slideToggle(function()
{
// fixFooter();
});
})
if ( $('.accordionPanel').length )
{
$('.accordionPanel').each(function()
{
if ( $(this).hasClass('active') )
{
$(this).children('.contentDetails').show(function()
{
// fixFooter();
})
}
})
}
/*---------------*/
/* END ACCORDION */
/*---------------*/
});
$(window).load(function ()
{
});