One click to open/second click to close accordian

Also checked the font issue on Chrome mobile and Firefox mobile, and it does not display in EITHER browser. So now I’m wondering if it’s a font issue, a browser issue, or an O.S. issue. The only way I’ve been able to see the two ended arrow character has been in Firefox Quantum on my Windows 7 desktop.

What browser are you using that you’re able to see it?

woah! sorry for delay there! Had a late night vexing over the web server.
Just woke up at nearly 2pm!

I was using Safari 11. something
tried Firefox,to check, by which time, @randyrie had taken the pages down so couldn’t do any more testing.
but… you could check out to see if you can see some of my sites for me,
ie

http://sevenweb.co.uk

or anyone could check for me if you’d like just to make sure its not some crazy thing local to myself or ISP.

Good morning… back at it. I will reload the test pages shortly to revisit the issues.
OK they’re reposted:

1.) Please visit http://statecollegedev.com/rfl/homepage-copy.php to review the non-working accordian.
2.) PLease visit http://statecollegedev.com/rfl/test-accordion.html to see where the accordian is working the way I’d like it to.

I’m convinced there is something wrong with the homepage-copy page because if I paste the code into the div where I want it, it fails to work. Anything stick out to you what might be breaking the accordion on the homepage?

Weird nested HTML - that’s all (my guess)!

Cheers

Thomas

Its an Apple special character (up/down arrow). Displays OK on the browsers (FireFox, Chrome, Safari, IE) that I checked.

It’s an Apple special character - like an emoticon, not a font. Thanks for pointing out that it doesn’t load correctly on Droids and PCs. I’ve removed it to avoid confusion.

My client likes that stretch effect. So…

Hi, ok Im around too.
Sorted my WebHosting issue…er it was me!
Well, My VPN!

MY webhosting company had just decided to block the Current IP address Block that my VPN was using as an exit node from thier chain.

Panic over… but good to know in case you guys get that too (and no one checked my Domains for me either. grrrr)

SO… Accordions!

I clicked on your links about an hour ago and successfully opened your sites…

Sorry, I worked all night last night, so I slept all day today.

That explains it. You could go with one of these Unicode characters, which should be platform independent.

U+2195 - :arrow_up_down:
U+21D5 - ⇕
U+21C5 - ⇅

Never thought of that --thanks for the tip, Printninja. I’ll put them in my dropdowns.

I just did another accordion on a template page… works fine. See: http://statecollegedev.com/rfl/pagetemplate-accordion.php.
Copied its code to my homepage and it fails. There is something definitely wrong with the homepage’s setup - - running PineGrow’s “Check for HTML errors…” reports the html code is fine. Could it be wierd div structuring?

Okay, I took a look at your code here.

http://statecollegedev.com/rfl/homepage-copy.php

Where to begin…

It’s a mess (sorry.) You’ve got massive amounts of duplication. The entire navigation section is duplicated three times! There are multiple <body> and <html> open and close tags. The javascript sources appear three times (which is probably why your accordion is behaving weirdly.) There are other anomalous bits such as <a name="top"></a> which appears on line 21, directly after the <body> tag.

It appears as though (I’m guessing) in your attempts to copy/paste the accordions, you duplicated entire sections of the page (there are multiple duplicate accordion ID declarations.) And while the Pinegrow editor may not show HTML errors, the code is still invalid. All that duplicate code needs to be removed before you can proceed.

Also, I realize this is the default way Pinegrow does things, but all the inline styles being used make the code very messy and difficult to read. Best practice is to style the various elements through the CSS stylesheets. By styling everything with Inline styles, you can’t make global changes, which is the beauty and advantage of using CSS.

WOW!! I had no idea PineGrow duplicates the code like this and is something I never would have caught using its narrow code-view window. Do you use an external code viewer so you can see the entire page that you noticed the duplicates?

I cleaned up the duplicate code and inserted another accordion which, as you predicted, works fine. I’m going to try adding two more dropdowns and see if I can prevent breaking the page again.

BTW, what is the best way to add to the accordion using a PineGrow tool?

Thanks Printninja and Schpengle for your help. I’ve gotten the page to work perfectly: http://statecollegedev.com/rfl/familytrees.php. I’ve also learned a number of new things. Give or take a few millennia, I should be an expert on all this.

No, I’m just used to scrolling through code and it was quickly apparent that you had large sections duplicated. Once you’re used to coding, after a while, you can “see” the page, kind of the way a musician can look at sheet music and “hear” the music.

See the attached pic for what I think is the easiest (and safest) way to add Bootstrap components to a page. Get comfortable using the tree. It’s a good intermediate step between working visually, and working directly with the HTML.

BTW, I’ve noticed all your pages end in the .php extension. Is that intentional?

re: Using the Tree
I have a rough time using the tree since whenever I drag a component over to it, it expands too quickly before I can drop it where I want it in the tree… hand-eye coordination issue, I guess.

re: PHP
All the pages use a PHP code to restrict access plus the site is still growing and I will eventually add a MySQL dB back end to dynamically store and display data.

re: Code blow-up
I occasionally use "View Source’ in my browser to view code in larger segments… just didn’t think of it for reviewing that page. My mind is still blown that PineGrow actually blows up the code that way but now I know to watch for that. Again thanks for discovering that and bringing it to my attention.

Once you drop it in the tree, even if it doesn’t land exactly where you want it, you can always move it up/down or in/out with the controls. I couldn’t dragging every element directly into the live workspace. The tree gives you total flexibility AND precision.

I almost always have the code window open when building a site. I tend to edit the code quite a bit while working. This is my normal workspace.

1 Like