Accordion title as h2 or h3 - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
January 22, 2022 at 4:32 am #1336600

Daniele
Participant

Hi guys
I tried to do as written here

Intro to layout builder

but seems not to change anything.

The layout is the same as if I write < > instead of the hash value < = ###lt### > = ###gt###
and the toggle cannot be clicked.

Best,

January 22, 2022 at 7:12 am #1336616

Guenni007
Participant

firstly, your page is easy to find based on the screenshot, so can you please include the link to this test page here?

on the other hand, based on your headline, it is not clear to me what you want to achieve with the small plugin. This plugin only allows you to use special characters that are actually used for tags in the content.

The “PADI IDC Thailand Koh Lanta – …” seems to be a heading in front of a toggle Element. So how did you insert this. Is it a heading element?
If so – you can change the tag to h2 in the element itself ( Heading Type ).
the toggle Titles are on default p-tags – but could be changed to f.e. h3 on the alb element itself (toggles.php) and have a child-theme toggles.php to achieve this.
but be careful – it is not only those lines here:

but also then all p.toggler in f.e. selectors array on lines 897ff.

If you only want to have h2 / h3 headings in your content – just choose it from here:

January 22, 2022 at 7:27 am #1336617

Daniele
Participant

Hi Guenni
thanks for answering.
I dont understand what you mean “easy to find” since this topic I’m referring is not on an online page for the moment, that’s why I put the screenshot.

By the way, yes I would like to change the p-tags of the toggle title to h2 or h3.

Could you (or someone from Enfold) guide me how to do it on the toggles.php?
Is php the ONLY way?

Cheers guys

January 22, 2022 at 12:13 pm #1336634
Guenni007
Participant
you find that file in: enfold/config-templatebuilder/avia-shortcodes/toggles.php
open it on you desktop pc with a good texteditor ( ;) not word ) ( notepad++ or sublime text for mac osx)
find all p.toggler and replace them with f.e.: h3.toggler
find that code above and replace p with h3 ( don’t forget the closing tag )
save that edited alb element on your desktop pc.

Now:
to have child-theme substitutes for enfold alb elements – create a subfolder on your enfold installation via ftp named : shortcodes
upload to that subfolder the toggles.php file

and put this to your child theme functions.php:
```
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
```
see documentation of enfold: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

this is the way you can replace every alb element by a child-theme alb.

you can see and download the toggles.php with h3 toggle-titles from here: https://pastebin.com/uyJAY2da

see: https://webers-web.info/testseite/#h3-title
January 22, 2022 at 12:18 pm #1336635
Guenni007
Participant
there is a jQuery solution on that – this in child-theme functions.php will do that job too:
```
function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }
      replaceElementTag('p.toggler', '<h3></h3>'); 
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');
```
– but on SEO reasons i would prefer not to replace the tags after page load, and take the first solution
January 22, 2022 at 11:02 pm #1336682

Daniele
Participant

Thanks Guenni
the example on your testseite is exactly of I mean!

So if I downlaod the php from your pastebin link, is that already the one I should upload to the shortcodes subfolder? (if I want the h3 tag)

Best,

January 23, 2022 at 1:54 am #1336695

Guenni007
Participant

Yes it is – but do not forget to place the code above in your child-theme functions.php: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

January 23, 2022 at 2:59 am #1336700
Daniele
Participant
Yes, this one right?
```
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
```
Best,
January 23, 2022 at 10:32 am #1336721

Guenni007
Participant

Correct – then let me know if everything worked.

January 24, 2022 at 6:02 am #1336841

Daniele
Participant

Ok Guenni, I’ll have a try this week.

But I need a couple of more answers:

1) so is this the only way right?
and it’s so no possible to tag h3/h2 only one accordion in one single page?

2) going back to my screenshot
what is circled in red is an accordion title where I wrote
###lt###h3###lt###PADI IDC Thailand Koh Lanta – What and How Will You Learn?###gt###/h3###gt###
as suggested in the enfold documentation (plus the Avia Special Character Converter plug in)
Is that not working then?

I also noticed the if instead I write normally
<h3>PADI IDC Thailand Koh Lanta – What and How Will You Learn?</h3>
I got the warning
Warning: Characters <,>,[,] might break ALB backend or frontend. Read more if you want to use them. You can use valid HTML markup.

but the results is the same like the ### and the plug in

Can someone illuminate me?

Best,

January 24, 2022 at 3:34 pm #1336911
Guenni007
Participant
If it has only styling reasons (appearance of a h3), then the way over the jQuery Script above would be the easiest variant. You would give the Accordion a custom class and adjust the selector in the script accordingly.
```
function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }

      replaceElementTag('.h2titles p.toggler', '<h2></h2>');
      replaceElementTag('.h3titles p.toggler', '<h3></h3>'); 
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');
```
here with custom class; h2titles and h3titles
see: https://webers-web.info/toggles/
January 24, 2022 at 10:15 pm #1336943

Daniele
Participant

Unfortunately it’s SEO reasons, not a styling ones.

Best,

January 25, 2022 at 10:38 am #1337020

Guenni007
Participant

But i think today this limitation is now deprecated: https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

January 25, 2022 at 9:20 pm #1337176

Daniele
Participant

I’m quite confused ;-)
didnt you write Guenni:
“but on SEO reasons i would prefer not to replace the tags after page load, and take the first solution”

Also,
Could please some one explain me this:

1) so is this the only way right?
and it’s so no possible to tag h3/h2 only one accordion in one single page?

2) going back to my screenshot
what is circled in red is an accordion title where I wrote
###lt###h3###lt###PADI IDC Thailand Koh Lanta – What and How Will You Learn?###gt###/h3###gt###
as suggested in the enfold documentation (plus the Avia Special Character Converter plug in)
Is that not working then?
I also noticed the if instead I write normally
<h3>PADI IDC Thailand Koh Lanta – What and How Will You Learn?</h3>
I got the warning
Warning: Characters <,>,[,] might break ALB backend or frontend. Read more if you want to use them. You can use valid HTML markup.

but the results is the same like the ### and the plug in

Best,

January 26, 2022 at 4:21 pm #1337321

Günter
Keymaster

Hi,

It is not possible to put h2 or h3 tags inside a “p” tag which is the container for the title:

https://stackoverflow.com/questions/42890736/slim-h3-inside-p

I’ve added this problem to our dev repo and planned to address it for 4.9 – check the changelog or https://kriesi.at/support/topic/enfold-upcoming-fixes/

But for the moment there is no easy solution.

Currently the only way is to modify enfold\config-templatebuilder\avia-shortcodes\toggles\toggles.php around lines 1118 – 1124 and replace the p tag.
And add additional logic to identify the element to know how to update the p tag.

Best regards,
Günter

January 26, 2022 at 11:48 pm #1337376

Daniele
Participant

Yes I guess you mean what Guenni wrote (thanks again Guenni)

Best,
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.