Hi there,

I am trying to customize a Woothemes shortcode toggle in their 'Canvas' theme, and in my particular case I have two toggles on my Wordpress page. One toggle shows by default, the other is hidden. What I want to do is switch those toggle states around (open the second toggle, close the first toggle) if a certain URL hash is entered.

Example:
Toggle 1 state = open
Toggle 2 state = closed
User enters http://example.com/#opentoggle2
Toggle 1 state = closed
Toggle 2 state = open

I am guessing I would have to assign the two toggles different ID's somehow to make this happen and then run location.hash or something similar.

I am using WooThemes shortcode system, so the toggle is comprised of the following code in two files shortcode.js and shortcode.css:

shortcode.js

  jQuery(function($) {
    /*-----------------------------------------------------------------------------------
      Toggle shortcode
    -----------------------------------------------------------------------------------*/

        if ( jQuery( '.shortcode-toggle').length ) {    

            jQuery( '.shortcode-toggle').each( function () {

                var toggleObj = jQuery(this);


                toggleObj.closedText = toggleObj.find( 'input[name="title_closed"]').attr( 'value' );
                toggleObj.openText = toggleObj.find( 'input[name="title_open"]').attr( 'value' );

                // Add logic for the optional excerpt text.
                if ( toggleObj.find( 'a.more-link.read-more' ).length ) {
                    toggleObj.readMoreText = toggleObj.find( 'a.more-link.read-more' ).text();
                    toggleObj.readLessText = toggleObj.find( 'a.more-link.read-more' ).attr('readless');
                    toggleObj.find( 'a.more-link.read-more' ).removeAttr('readless');

                    toggleObj.find( 'a.more-link' ).click( function () {

                        var moreTextObj = jQuery( this ).next( '.more-text' );

                        moreTextObj.animate({ opacity: 'toggle', height: 'toggle' }, 300).css( 'display', 'block' );
                        moreTextObj.toggleClass( 'open' ).toggleClass( 'closed' );

                        if ( moreTextObj.hasClass( 'open') ) {

                            jQuery(this).text(toggleObj.readLessText);

                        } // End IF Statement

                        if ( moreTextObj.hasClass( 'closed') ) {

                            jQuery(this).text(toggleObj.readMoreText);

                        } // End IF Statement

                        return false;
                    });
                }

                toggleObj.find( 'input[name="title_closed"]').remove();
                toggleObj.find( 'input[name="title_open"]').remove();

                toggleObj.find( 'h4.toggle-trigger a').click( function () {

                    toggleObj.find( '.toggle-content').animate({ opacity: 'toggle', height: 'toggle' }, 300);
                    toggleObj.toggleClass( 'open' ).toggleClass( 'closed' );

                    if ( toggleObj.hasClass( 'open') ) {

                        jQuery(this).text(toggleObj.openText);

                    } // End IF Statement

                    if ( toggleObj.hasClass( 'closed') ) {

                        jQuery(this).text(toggleObj.closedText);

                    } // End IF Statement

                    return false;

                });

            });


        } // End IF Statement

    }); // jQuery()

shortcode.css

  /*-------------------------------------------------------------------------------------------*/
    /* 15. Content Toggle */
    /*-------------------------------------------------------------------------------------------*/

    .shortcode-toggle { margin: 0 0 1.2em;}
    .shortcode-toggle h4 {margin: 0;}
    .shortcode-toggle h4 a { display: block; padding: 3px 0 3px 10px; background: #f3f3f3 url(../images/shortcode-toggle-close.png) no-repeat 99% center; }
    .shortcode-toggle.closed h4 a  { background-image: url(../images/shortcode-toggle-open.png); }
    .shortcode-toggle .toggle-content  { padding: 10px 10px; background: #f9f9f9; }
    .shortcode-toggle.closed .toggle-content, .shortcode-toggle .more-text.closed { display: none; }
    .shortcode-toggle .more-text.open { display: block; }
    .shortcode-toggle.border { border: 1px solid #EBEBEB; }

    /*-------------------------------------------------------------------------------------------*/
    /* -15.1 Content Toggle Alternate Style - White */
    /*-------------------------------------------------------------------------------------------*/

    .shortcode-toggle.white h4 a { background-color: #FFFFFF; }
    .shortcode-toggle.white .toggle-content { background-color: #FFFFFF; }

I've started to write the code below to see if I could get both to open from their closed states with no luck..

    var hash = window.location.hash;

                if (hash = $("#participant")) {

                    toggleObj.openText = toggleObj.find( 'input[name="title_open"]').attr( 'value' );

                    } // End IF Statement

How would I work this into the shortcode.js file? I am a JS newbie. Hopefully someone here could help me make this happen, thanks in advance!

This is how the toggles are rendered on the page:

        <div class="shortcode-toggle toggle-close-me open default border"><h4 class="toggle-trigger"><a href="#">Close Me</a></h4>
<div class="toggle-content">Content to be toggled.</div><!--/.toggle-content-->
<input type="hidden" name="title_open" value="Close Me" /><input type="hidden" name="title_closed" value="Open Me" /></div><!--/.shortcode-toggle-->
<div class="shortcode-toggle toggle-open-me closed white border"><h4 class="toggle-trigger"><a href="#">Open Me</a></h4>
<div class="toggle-content">Content to be toggled.</div><!--/.toggle-content-->
<input type="hidden" name="title_open" value="Close Me" /><input type="hidden" name="title_closed" value="Open Me" /></div><!--/.shortcode-toggle-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.