Add Newsletter Block to Accordion Block

Hi, 

Is it possible with CSS or Jquery to add (or embed) a newsletter block into an accordion menu in Squarespace 7.1?

Thanks,

Hannah

Quote

Is it possible with CSS or Jquery to add (or embed) a newsletter block into an accordion menu in Squarespace 7.1?

I do not necessarily have a solution for this specific need but the answer is yes, it is possible.

The general technique is to place the block somewhere, hiding it. Then with code move it into place.

Keeping in mind that SS didn't design blocks to be put in blocks and so there is some risk and spacing issues that would need to be resolved after the block is moved. Also I don't know SS's future plans for the newsletter block, it currently works now, when move, apparently. SS did recently update the form block which made it much more difficult to work with programmatically. This same thing could happen to newsletters blocks and that could break this potential effect.

The question is where would you want to keep the newsletter block? On the page itself with the accordion block? Or would you want to grab it from the site footer, if you wanted to insert it into multiple accordions across different pages?

Here we can see my Elements Replace code move a newsletter block out of the footer and into the accordion block.

And here is an example setting in my code to make the move.

'#block-yui_3_17_2_1_1685485167017_9632' : '#block-yui_3_17_2_1_1646456310862_3026 .accordion-item:nth-child( 3 ) .accordion-item__description p',

Hi, Thanks so much for your reply; this is a great help!

I'd love to permanently include a newsletter block in an accordion in my site footer.

I.e. the accordion title is 'Subscribe', which reveals the newsletter block.

Can the original newsletter block be created on a hidden page and moved into the footer accordion?

To clarify, I essentially want to create a 'click to reveal' newsletter block.

If too tricky to embed the newsletter block inside an accordion block, would it be possible to insert a newsletter block into my site footer, hide it with CSS and make it reveal itself upon clicking hyperlinked text 'Subscribe'?

The code I cited will get you close the this effect.

In the footer you create a section. It needs to be the last section of the footer. Then in a section above that you create a section with the accordion block with one item. Make the title Subscribe and an empty description.

Then install my cited code per its instructions.

Then in my code set a line for the  selectorsReplaceMap variable similar to the following.

      '[enter the newsletter block id here replacing square brakets]' : '[enter the accodrion block id here replacing square brakets] .accordion-item .accordion-item__description p',
      

Let us know how it goes.

Thank you, will the elements replaced code work if I'm using fluid engine?

Yes. The code doesn't care about the editor you are using.

Thankyou.

Unfortunately, the css code is hiding the entire footer rather than isolating the last item in the footer. Is there a work around for this?

What is the URL for your site? The CSS is designed to work with at least two sections in the footer, hiding the last one.

Ah ha!

Okay, I have correct that mistake on my behalf and added the newsletter block into a second footer section, and it is now hiding it correctly.

I can't yet see the newsletter appear in the accordion block as desired.

My site URL is: landerse.squarespace.com
It is still in trial developer mode

site url:  landerse.squarespace.com

password: red

The code is now working correctly, but it seems to be replacing the accordion with the newsletter block, removing the 'subscribe' accordion title.

You need to follow the example I showed most recently for the selectorsReplaceMap variable. You've only included the block id for the accordion and not the rest which will further target the proper element to replace.

Thankyou.

Are you able to clarify within your code the areas I still need to add?

Fantastic!!! You're magic Creedon! Thanks so much.

Is it possible to re-position the newsletter block with CSS? To align it far right, (in line with the accordion block). It seems to be positioned to the left of the accordion, even though the accordion design settings are set to the right position.

Quote

Is it possible to re-position the newsletter block with CSS? To align it far right, (in line with the accordion block). It seems to be positioned to the left of the accordion, even though the accordion design settings are set to the right position.

I'm sure there is some CSS that could be applied to make things better. I don't have a full solution off the top of my head.

The job of my code is to get one element to move to another location, something that SS doesn't do by default. Because we are moving elements around and putting them into places SS didn't design them to go we are on our own. My code is unaware of all the complexities of where the element came from and what it replaced.

It looks like you are making some progress on getting a right alignment?

Thanks so much; you have definitely solved my problem and created the click-to-reveal newsletter block as I hoped.

I will continue my attempts to realign the block, but the outcome is wonderful overall. Thanks again!

Please keep me posted if any additional CSS comes to mind to solve this alignment.

Quote

Please keep me posted if any additional CSS comes to mind to solve this alignment.

Did you add a the following ruleset to your page header code injection?

    <style>
      form {
        width: 75%;
        height: auto;
        margin: auto;
        position: right;
      }
  </style>

If so, remove it, make a copy somewhere. When I removed it things got better.

Hey! Epic! This solves it once again, massive thanks!