Question

I’m creating an e-newsletter with jquery expander boxes for each article. By default, each expander box is closed. We send out an email teaser ahead of each issue with links to each article. I’m wondering if there is any way to expand the article to which I link in the code of the teaser (or possibly within the class of the named link). For reference, the jquery file can be found here: http://jjnursingnotes.com/NOV12/jquery.expander.js

The HTML for the newsletter is as follows. Content within the div layer “expander” is what I want displayed when a link to http://jjnursingnotes.com/NOV12#01 is inserted into the email teaser.

<div class="expander">
    <a name="01"></a>
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <h3>content</h3>
</div>

Answer 1

Without looking at the specifics of your expander plugin, here’s a solution I used recently in one of my own sites. Hopefully you can customize to work with the expander plugin you’re using. I cannot take the credit for variable parsing, this originated elsewhere.

Your link would need to be setup as such:

http://jjnursingnotes.com/NOV12?section=01

Then your JavaScript:

<script type="text/javascript">
// Redirect to Appropriate Section
var urlParams = {};
(function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

$(document).ready( function(){
    if ( urlParams['section'] != '' ) {
        // urlParams['section'] variable = the ?section=XXX part of URL
        // Here is where you would need integration with expanding box

        // Assuming you use something like <div class="expander" id="sect01">
        // as your expander, something to this effect ought to work:

        $("#sect" + urlParams['section'] ).find(".read-more a").click();

        // Position document at start of anchor 
        $('body,html').animate({ scrollTop: $("#sect" + urlParams['section'] ).offset().top }, 500 );
    }
});
</script>