Change icon order in toggle without changing code

Hi,

Thanks for using my plugin. Normally I’m really good about offering filter options which would allow you to make changes to plugin output without altering plugin code, but in this case my shortcodes fall short. Right now the only way to do what you want is to alter plugin code. I’ll be changing that in a future release.

Thanks

Thanks.

I have been trying to learn PhP. I was hoping there was something like this psuedo-code (not close at all but you get the idea) I could put in my Functions area and leave the code alone:

add_filter( ‘POINT TO APPROPRIATE FUNCTION WITHIN ARCONIX’ , ‘order_toggle’ );

function order_toggle($order) {

$r = ‘<div class=”arconix-toggle-wrap’. $css . ‘”>’ . ‘<div class=”arconix-toggle-title ‘ . $load . ‘”>’ . $title . $icon . ‘</div>’;

return $order;

}

Your approach would absolutely be the correct one (though technically you’d return $r and not $order, but that’s minor) if I had set up my code to allow that to happen. Make the change you need in the core files. I’ll update this thread when I’ve made the proper enhancement in the plugin.

Cool. Thanks. Replacing the plugin is fine – I am just trying to learn. Thank you for the quick response.

I could create another tag, but one quick question. Is there a way to make the toggle title tags header tags (I think in an early release you had changed this)?

Thanks.

Yeah, they used to be header tags but there was some kind of issue with them, which is why I switched to a div. All you’d have to do is replace

$r = '<div

with

$r = '<h3

and replace the closing div w/ the appropriate closing header.

Thanks. What about making the text linkable? I tried putting in tags but it did not like it.

So I then decided not to have a title and use normal tags (outside of the toggle). But I couldn’t figure out the CSS to make the toggle title inline (remember it is now after the tag) to the tag I had (the problem is the div.arconix-toggle-wrap).

If there was no arconix-toggle-wrap I could just write:

.list-toggle div.arconix-toggle-title {display: inline;}

HTML

Website
[ac-toggle css=”list-toggle”]
INSERT TOGGLE TEXT
[/ac-toggle]

OUTPUT

Website
<div class=”arconix-toggle-wrap list-toggle”>
<div class=”arconix-toggle-title toggle-closed”>
<i class=”fa fa-plus-square”></i>
</div>
<div class=”arconix-toggle-content” style=”display: none;”>
INSERT TOGGLE TEXT
</div>
</div>

CSS (If there was no div.arconix-toggle-wrap.)
.list-toggle div.arconix-toggle-title {display: inline;}

Thanks.

Oops WordPress converted my Website code. Website is in a tags.

Sorry, I’m a bit confused about the issue you’re having. The icon is already set to display inline. Are you talking about aligning it with the right side of the toggle?

I am trying to make the text within toggles linkable (a tags).

I tried two solutions:
(1) Make the Toggle Title Text into a tags. (did not work).
(2) Do not use the Toggle Title Text. Instead put a blank Toggle Title Text and just put an a tag (so I would click just the plus to open and close the toggle). To do this I would need to make the a tag I entered in HTML inline with the blank Toggle Title (which contains the i tag and toggle). However the toggle has a wrap so I could not get the CSS to work.

Did I explain this well?

You can make text within toggle content areas linkable, but there’s no way to make hyperlink the toggle titles.

1. Anchor tags won’t work in the toggle title under any condition, as you discovered, because clicking on the toggle title is supposed to reveal the hidden content panel so browsers ignore any anchor entered. You can put hyperlinks on text in the content area (the space between the [toggle][/toggle]).
2. You can enter a blank toggle title and the toggle will still open and close as expected. You can see that in action here: https://demo.arconixpc.com/box-test/

That help at all?

Thanks.

Assume that you had the blank toggle in the example. Also, assume that you got rid of the box around the toggle. Could you put normal text on the same line as the +/-. So this text would serve as a de facto title. You could then make this normal text whatever tag you wanted including tags.

Thanks. I am going to put sample code below and I am going to wrap my a tags in parenthesis instead of <> so they do not turn into links.

CODE IN WORDPRESS

(a href=”https://website.com&#8221;)Website(/a)
[ac-toggle css=”list-toggle”]
INSERT TOGGLE TEXT
[/ac-toggle]

OUTPUT IN HTML
(a class=”a_tag” href=”https://website.com&#8221;)Website(/a)
<div class=”arconix-toggle-wrap list-toggle”>
<div class=”arconix-toggle-title toggle-closed”>
<i class=”fa fa-plus-square”></i>
</div>
<div class=”arconix-toggle-content” style=”display: none;”>
INSERT TOGGLE TEXT
</div>
</div>

All I want to do is make my a.a_tag and di.arconix-toggle-title inline. If there was no wrap, all I would need to do is write one line of CSS.

.list-toggle div.arconix-toggle-title {display: inline;}

Did I explain this well? Thanks.

can you put backticks around your code? html not in between those ticks gets parsed and it adds hyperlinks to things which makes it hard to understand. Backtick, btw is to the left of the 1 key on your keyboard (beneath the tilde)

Look at next post.

Thanks for teaching me something new. I can now use the proper a tags.

If I put the following code in WordPress

<a href="https://website.com">Website</a>
[ac-toggle css="list-toggle"]
INSERT TOGGLE TEXT
[/ac-toggle]

it produces the following HTML

<a href="https://website.com">Website</a>
<div class="arconix-toggle-wrap list-toggle">
  <div class="arconix-toggle-title toggle-closed">
    <i class="fa fa-plus-square"></i>
  </div>
  <div class="arconix-toggle-content" style="display: none;">
  INSERT TOGGLE TEXT
  </div>
</div>

If the following were not there

<div class="arconix-toggle-wrap list-toggle">
...
</div>

I could just write the following CSS to make everything work.

.list-toggle div.arconix-toggle-title {display: inline;}

Thanks.