SitePoint Accordion Tutorial not working with Ubuntu's FireFox?

I used the following tutorial but it appears as though there is some kind of conflict.

This Tutorial works OK
http://blogs.sitepointstatic.com/examples/tech/css3-target/accordionvert.html#acc4

My site fails :frowning:
http://ampHtmlDemo.tk/index.php

The accordion works OK with Ubuntu’s Chrome, Opera, Verdana and Tor browsers but refuses point blank to open with FireFox?

Just tested with an iPad Mini 2 and Safari, FireFox and Opera work OK?

I cleared all the FireFox cookies and still no joy :frowning:

Any suggestions?

1 Like

It works for me in Firefox 49.0.1 in Windows.
The transitions are not as smooth as in the tutorial, but the accordion does open.

1 Like

Your section elements look wonky. You’ve got acc for each id, and you’ve got some invalid (I think) characters in there as well.

2 Likes

Many thanks for spotting a possible problem. I will check the script tomorrow on the desktop.

Seems strange the other browsers are working ok…

@SamA74 apart from being a bit jerky.

I’m aware that AMP pages don’t validate in the conventional way that hml5 does, though I don’t know exactly what is and is not valid in AMP. But there are quite a few (html5) validation errors in there.
I thought the differences were mainly a few amp specific elements and attributes. But some errors I see are things lke conventional element nesting issues and whitespace in IDs.

This alternative validation is one thing about AMP I was curious about. As in I’m sure Google’s own browsers would accept and interpret it correctly, but how will other browsers read it?

1 Like

FWIW, I can confirm it’s not working for me in Firefox 50 on Ubuntu Gnome 16.04.

Try validating with these tools:

On the desktop the Chrome Browser Extension validated ok.

JavaScript is essential. I have yet to implement the canonical link to no JavaScript, maybe tomorrow…

I know that about AMP, and I had enabled JS. Still didn’t work.

1 Like

It doesn’t work with Chrome 54 on Win7 either. It opens, but there are no transitions…the demo does work.

1 Like

The AMP Validator gives it a pass. But I’m not sure how far I trust it.



</p< ```

Apparently that is valid code. :shifty:

2 Likes

@sam74

The “spacer” was moved to the common “incs/footer.php” after a long arduous day. Looks as though I am going to be busy tomorrow :slight_smile:

1 Like

It seems AMP validation is not as straightforward as one would hope.
Valid amp tags may fail conventional validation.
But it seems the amp validator will let ordinary validation errors slip through, as if it is only checking the amp compliance, not validation overall.

2 Likes

@Sam74

It seems AMP validation is not as straightforward as one would hope.
Valid amp tags may fail conventional validation.

I agree and have found several similar anomalies.

I am convinced Google’s approach of creating the new technique and to disregard the tried and tested W3.org validation tools is hindering Amp progress.

Not working for me (Firefox 50 on Windows)

1 Like

Hi,

Its not working in Firefox Windows for me and its because of the invalid id refs and fragment identifiers.

Changing the ids to a valid format makes it work in Firefox.

   <section id="acc_incs/_header.php">
     <h2><a href="#acc_incs/_header.php"> incs/_header.php </a></h2>

You can’t have invalid characters and spaces in ids and the fragment identifier must match and not have spaces at the end either.

Making the changes above makes the accordion work in Firefox.

2 Likes

Tried it on FF50 this time and not working.

That has been my concern with AMP. If they medal with the spec, then do they expect all the makers of all the other browsers to support their version of it?

1 Like

@Sam74, @SpacePhoenix, @PaulOB, @TechnoBear, @DaveMaxwell

I discovered how to create the alternative amp-canonical link also minus JavaScript :slight_smile: The “body” content, associated files and CSS are validated and the same files used in the AMP version. Notice the .php7 file extension. The top menu home link calls the AMP version.

http://amphtmldemo.tk/index.php7

The FireFox accordion errors were due to a PHP error where I was trying to build a Dynamic Accordion by iterating over an array of links.

It is so much easier to to create pages and be able to validate the content :slight_smile:

I still don’t see the transition effect that’s in the demo…is that OK with you? Or is just the open/close you were looking for (at which point, I embarassingly admit I misunderstood the problem…)

1 Like

The original problem of not opening was solved and I tried changing the colors and tied myself in knots.

Also the copy I made was jumping all over the page.

Now it does not jump, the color scheme is more to my liking but still requires some tedious tweaking :frowning:

Edit:

The long term plan is to select a component, only about five now available, enter a couple of essential parameters such as title and the style sheet. Allow the user to edit the generated sample. Submit and render the modified template so the user can copy and paste the complete AMP page to run on their own server.

At the moment available tutorials and demos are clunky.

Edit:
I like your animated screen dumps.