A fresh pair of eyes...
3 posts by 3 authors in: Forums > CMS Builder
Last Post: August 21, 2014 (RSS)
Hi, All.
I'm using a contractible headers script from Dynamic Drive (http://www.dynamicdrive.com/dynamicindex1/navigate2.htm) - adapted for use with CMSB - to show and hide content on two pages. It seems to be working properly on this page across all browsers - http://bikramyoga.temporaryurl.biz/about-faqs.php - but not this one - http://bikramyoga.temporaryurl.biz/classes-pricing.php - where it works well in Firefox, but not IE8. In the latter case, the content doesn't expand on the page when you click on a link in the main content area (Membership, etc).
I've been staring at the code for both pages, but can't figure out my mistake. Can anyone spot the problem in the attached files, please?Thanks!
Hey,
I've had a look at the code in IETester in version 8, but the drop down's seemed to behaving correctly for me - although IE Tester can sometimes behave differently to an actual install of the browser -.I did notice that the menu at the top of the page was out of alignment (See attached).
Have you tried contacting Dynamic Drive to see if they have any suggestions for a fix?
Cheers,
Greg
PHP Programmer - interactivetools.com
By mizrahi - August 21, 2014
I took a look but wasn't able to notice any different. But I wanted to comment on how absurd this code from dynamic drive is. You can accomplish this exact same thing in around 5 lines of jquery. And since you are already loading jquery for other purposes, you may want to consider that instead.
The jquery...
$(".showhide-content").hide();
$(".showhide-trigger").click(function () {
$(this).next(".showhide-content").slideToggle(300);
$(this).toggleClass("open"); // optional, adds a class so you can alter the styling
});
the html
<h4 class="showhide-trigger">The Visible Title</h4>
<div class="showhide-content">
<p>The toggled content. you can include any html in here that you need.</p>
</div>
<h4 class="showhide-trigger">Repeat as many times as you want</h4>
<div class="showhide-content">
<p>The toggled content. you can include any html in here that you need.</p>
</div>
<h4 class="showhide-trigger">Repeat as many times as you want</h4>
<div class="showhide-content">
<p>The toggled content. you can include any html in here that you need.</p>
</div>