Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1142

    Upon further testing I figured out a remedy so I thought I would share with the community here.

    I found that it was only the first toggle item that did not work, but secondary, tertiary, etc. toggle items work just fine. I also found that the toggle were gapped apart by about 30px each.

    First, I make the first toggle a “dummy toggle” like this, so I am hiding the one that doesn’t work (for whatever reason, maybe a js thing?)

    Code:
    <span class=”hideme”>
    [toggle title=’hidden’]
    [/toggle]
    </span>

    Then I hide the element by adding the following to my styles.css

    Code:
    /*added for hidden elements*/
    .hideme {
    visibility:hidden;
    }
    /*added for toggler within tabs*/
    .js_active p span.hideme{
    position:absolute;
    left:-10000px;
    top:auto;
    width:0px;
    height:0px;
    overflow:hidden;
    padding:0px;
    }

    For the styling I found that anytime my toggles are included in tabs they pickup the default 15px top/bottom margin from .js_active .entry .tab_content which separates the toggles with big empty gaps so I did little fix.

    Code:
    /*added for toggler within tabs*/
    .js_active .entry .tab_content .toggler{
    margin: -30px 0px 5px; /*shifts the togglers back up 30px but adds 5px to the top of toggler content when active*/
    }
    /*added for toggler within tabs*/
    .js_active .entry .tab_content .toggle_content{
    margin-bottom: 10px; /*adds margin back between toggler content and next toggler below that is not expanded*/
    }

    Hope this helps.

    #34173

    Thanks for your help. It’s much appreciated.

    The Dude

    #34174

    Ok, I just found out this doesn’t work in firefox, the top level element doesn’t expand properly while the remaining ones do. Also, in IE8 they all work but they have to be clicked twice.

    I’m gonna try something else and post back the results.

    #34175

    Just like another fix for toggles within [one_fourth],[one_half],etc. (http://www.kriesi.at/support/topic/toggle-not-working-inside-one_fourth#post-4736)

    jQuery to the rescue!

    (This is a 2 part fix. – 1 part functionality fix and 1 part visual fix)

    First, when we add a toggle within a tab, the “title” of the first toggle item defined gets it’s span wrapped in paragraph tags while the others do not…this breaks the functionality of the first toggle.

    I found if we wrap all the toggle entires into a unique div (just in case you have multiple toggles on the same page), like below, the first span doesn’t get wrapped in <p></p>, functionality restored.

    Code:
    <div id=”toggle-ABC”>
    [toggle title=’A’ close = ‘closeAll’]
    text for toggle A
    [/toggle]
    [toggle title=’B’ close = ‘closeAll’]
    text for toggle B
    [/toggle]
    [toggle title=’C’ close = ‘closeAll’]
    text for toggle C
    [/toggle]
    </div>

    ..but there’s some nasty line breaks < br > that make each toggle gapped and goofy looking. Lets use a simple script to fix that. Let’s place this very last in our page/post html.

    Code:
    <script type=”text/javascript”>
    jQuery(‘#toggle-ABC’).contents().filter(‘br’).remove();
    </script>

    Wallah, all the pesky line breaks are now removed. If you have more than one group of toggles, i.e. one set on each tab, just make sure they are each wrapped in divs with unique id’s and then add a .remove line for each.

    Again, I think this could be added to the primary themes functions for future updates using if/then type methodology. =)

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

The topic ‘Toggles don't work properly or visually within tabs’ is closed to new replies.