Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change code for accordion dropdown to paragraph style instead of H1, H2, H3, etc.


TeamBrightSide

Question

Site URL: https://www.teambrightside.com/donate

Heya Gang - 

Working on a simple, short and sweet accordion for some FAQs for my charity. (See website.)

My issue is the weight of the text. I've put it in H3, as H4 gets heavier. H2 is also too big and overpowers the text next to it.

What I want to do is have the text of the accordion be my simple paragraph text, just italicized.

Here is my code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
    $(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

And here is my markdown:

### *+ Is this donation tax deductible?*

Yes. Team Bright Side is a 501(c)3 tax-exempt organization and your donation is tax-deductible within the guidelines of U.S. law. To claim a donation as a deduction on your U.S. taxes, please keep your email donation receipt as your official record. We'll send it to you upon successful completion of your donation.

### *+ Where does the money go?*

Monies raised by Team Bright Side go to funding the research to eradicate pediatric blood cancers. Awarded Guidestar's [Bronze Seal of Transparency](https://www.guidestar.org/profile/81-4599905) in 2020, the team has most recently funded the [Pediatric Cancer Data Commons](https://commons.cri.uchicago.edu/) at The University of Chicago Medicine Comer Children's Hospital while continuing to help fund the pediatric portfolio of the Leukemia and Lymphoma Society. You can read more about where the money goes here.

### *+ Do I get a receipt?*

Yes. A donation receipt will be sent to you at the email address you provide on this form. Please be sure to keep a copy of your receipt for tax purposes. If you select a recurring donation, you will be sent an individual receipt each month when your donation is processed.

### *+ How do I get my donation matched by my employer?*

If your employer offers gift matching, the process usually goes a little something like this:
1. Request a *Matching Form* from your company. 
2. Complete and submit the form to Team Bright Side at info@teambrightside.com.
3. Team Bright Side will complete the form and return it to your company 
4. The company issues a matching gift contribution to Team Bright Side and we credit that bad boy to the fundraiser you've chosen, or to the general fund.

Thinking that, since the code was looking for the H3 markdown code of ###, I could just eliminate the ### and replace the JS code with an i for the italics. (HA! Didn't work. Worth a shot, but didn't work.) And tried it with a * instead of the H3 and as well, no dice.

Any direction on what would be the easiest way to change the weight of this font slash make it do what I want it to do?

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You can add this to Design->Custom CSS .sqs-block-content .ui-open, .sqs-block-content .ui-closed { margin-bottom: 0; font-size: 16px; }

Site URL: https://www.teambrightside.com/donate Heya Gang -  Working on a simple, short and sweet accordion for some FAQs for my charity. (See website.) My issue is the weight of the text.

It lean on the ui-open and ui-closed classes not the tag name itself

Posted Images

5 answers to this question

Recommended Posts

  • 1
8 hours ago, TeamBrightSide said:

Site URL: https://www.teambrightside.com/donate

Heya Gang - 

Working on a simple, short and sweet accordion for some FAQs for my charity. (See website.)

My issue is the weight of the text. I've put it in H3, as H4 gets heavier. H2 is also too big and overpowers the text next to it.

What I want to do is have the text of the accordion be my simple paragraph text, just italicized.

Here is my code:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
    $(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

And here is my markdown:


### *+ Is this donation tax deductible?*

Yes. Team Bright Side is a 501(c)3 tax-exempt organization and your donation is tax-deductible within the guidelines of U.S. law. To claim a donation as a deduction on your U.S. taxes, please keep your email donation receipt as your official record. We'll send it to you upon successful completion of your donation.

### *+ Where does the money go?*

Monies raised by Team Bright Side go to funding the research to eradicate pediatric blood cancers. Awarded Guidestar's [Bronze Seal of Transparency](https://www.guidestar.org/profile/81-4599905) in 2020, the team has most recently funded the [Pediatric Cancer Data Commons](https://commons.cri.uchicago.edu/) at The University of Chicago Medicine Comer Children's Hospital while continuing to help fund the pediatric portfolio of the Leukemia and Lymphoma Society. You can read more about where the money goes here.

### *+ Do I get a receipt?*

Yes. A donation receipt will be sent to you at the email address you provide on this form. Please be sure to keep a copy of your receipt for tax purposes. If you select a recurring donation, you will be sent an individual receipt each month when your donation is processed.

### *+ How do I get my donation matched by my employer?*

If your employer offers gift matching, the process usually goes a little something like this:
1. Request a *Matching Form* from your company. 
2. Complete and submit the form to Team Bright Side at info@teambrightside.com.
3. Team Bright Side will complete the form and return it to your company 
4. The company issues a matching gift contribution to Team Bright Side and we credit that bad boy to the fundraiser you've chosen, or to the general fund.

Thinking that, since the code was looking for the H3 markdown code of ###, I could just eliminate the ### and replace the JS code with an i for the italics. (HA! Didn't work. Worth a shot, but didn't work.) And tried it with a * instead of the H3 and as well, no dice.

Any direction on what would be the easiest way to change the weight of this font slash make it do what I want it to do?

You can add this to Design->Custom CSS

.sqs-block-content .ui-open,
.sqs-block-content .ui-closed {
  margin-bottom: 0;
  font-size: 16px;
}

image.png.673c24fcd15c82f28d47197f6bb50aca.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Bingo! That did the trick.

So, for my own personal knowledge, since this was put into the CSS, does it meant that any markdown blocks on any of the pages that utilize H3 will now have 16 pt font? (Which is TOTALLY fine - I don't use it in other spots on the site, but just trying to wrap my head around coding a little better.)

Link to post
  • 0

It lean on the ui-open and ui-closed classes not the tag name itself

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

@TeamBrightSide I see this text on tablet doesn't look good. You can add this to Design > Custom CSS to fix.

https://www.teambrightside.com/

/* for immediate release */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-ab2547f8e4ba028efe61 * {
    font-size: 50px;
}
}

inter.png.0b9ca90619e7b83d8e80c5e179ea8604.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...