Swapexcerpt Test

Shortcode Method

Here we use both the swaptitle and swapexcerpt attributes to define the alternate trigger text and excerpt text. Note that the text is immediately replaced with no slide or fade effects.

[expand title="Trigger 1" swaptitle="Trigger 2" excerpt="This is the content that will be shown While Trigger 1 is displayed" swapexcerpt="This is the content that will be shown While Trigger 2 is displayed" trigclass="noarrow"][/expand]

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

Roll-Your-Own Method

Here we define:

  1. Original Trigger Text
  2. Swap Trigger Text
  3. Original Excerpt Text
  4. Swap Excerpt Text

<div class="collapseomatic noarrow" id="some_unique_id" title="Trigger 1">Trigger 1</div>

<div id='swap-some_unique_id' style='display:none;'>Trigger 2</div>

<div id="excerpt-some_unique_id" class="collapseomatic_excerpt ">This is the content that will be shown While Trigger 1 is displayed</div>

<div id="swapexcerpt-some_unique_id" style="display:none;">This is the content that will be shown While Trigger 2 is displayed</div>

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

New Toggle Target Feature: swaptarget

Now for a new feature that allows us to use a single trigger with a swaptitle that toggles between two targets. This first example will use both the shortcode and a bit of roll-your-own trickery.

1. create the initial expand element with a unique id and a swaptitle:

[expand id="bert" title="Trigger 1" swaptitle="Trigger 2" trigclass="noarrow"]This is the Content that will be shown while Trigger 2 is displayed[/expand]

2. create second target area and assign it an id of swaptarget-name_of_first_target. also it must have a class of both collapseomatic_content and colomat_close:

<div id="swaptarget-bert" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed
This is the Content that will be shown while Trigger 1 is displayed

Swaptarget Roll-Your-Own Method

This final example is how you could accomplish the same as above using only the roll-your-own method:

<div class="collapseomatic noarrow" id="ernie" title="Trigger 1">Trigger 1</div>

<div id='swap-ernie' style='display:none;'>Trigger 2</div>

<div id="target-ernie" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed</div>

<div id="swaptarget-ernie" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed
This is the Content that will be shown while Trigger 1 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let’s start here and see what we can do.

New Fixed Height Feature: lockheight

Here we have the ability to lock the height of the largest target div so as we toggle between targets the height stays fixed. This is accomplished by wrapping the target divs in a lockheight div as follows:

<div class="collapseomatic noarrow" id="bigbird" title="Trigger 1">Trigger 1</div>

<div id='swap-bigbird' style='display:none;'>Trigger 2</div>

<div id="lockheight-bigbird">

<div id="target-bigbird" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let's start here and see what we can do.</div>

<div id="swaptarget-bigbird" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed.</div>

</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let’s start here and see what we can do.
This is the Content that will be shown while Trigger 1 is displayed.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.