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!