Place link inside Jquery
<p>I am using a code found on jsfiddle <a href="http://jsfiddle.net/mekwall/fNyHs/" rel="nofollow">http://jsfiddle.net/mekwall/fNyHs/</a> since it seems to be the best for my situation as where I need dynamical text to fit the container (by changing the font size).</p>

<pre><code>(function($) {
$.fn.textfill = function(maxFontSize, maxWords) {
    maxFontSize = parseInt(maxFontSize, 10);
    maxWords = parseInt(maxWords, 10) || 4;
    return this.each(function(){
        var self = $(this),
            orgText = self.text(),
            fontSize = parseInt(self.css("fontSize"), 10),
            lineHeight = parseInt(self.css("lineHeight"), 10),
            maxHeight = self.height(),
            maxWidth = self.width(),
            words = self.text().split(" ");

        function calcSize(text) {
            var ourText = $("&lt;span class='dyntextval'&gt;&lt;a href='#' class='trigger'&gt;"+text+"&lt;/a&gt;&lt;/span&gt;").appendTo(self),
                multiplier = maxWidth/ourText.width(),
                newSize = fontSize*(multiplier-0.1);
            ourText.css(
                "fontSize", 
                (maxFontSize &gt; 0 &amp;&amp; newSize &gt; maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
            var scrollHeight = self[0].scrollHeight;
            if (scrollHeight  &gt; maxHeight) {
                multiplier = maxHeight/scrollHeight;
                newSize = (newSize*multiplier);
                ourText.css(
                    "fontSize", 
                    (maxFontSize &gt; 0 &amp;&amp; newSize &gt; maxFontSize) ? 
                        maxFontSize : 
                        newSize
                );
            }
        }
        self.empty();
        if (words.length &gt; maxWords) {
            while (words.length &gt; 0) {
                var newText = words.splice(0, maxWords).join(" ");
                console.log
                calcSize(newText);
                self.append("&lt;br&gt;");
            }
        } else {
            calcSize(orgText);
        }
    });
};
})(jQuery);



$(document).ready(function() {
$('.large').textfill({ maxFontPixels: 120, minFontPixels: 36});
$('.medium').textfill({ maxFontPixels: 32 });
$('.small').textfill({ maxFontPixels: 18 });        
});
</code></pre>

<p>But I am having a problem with this part:</p>

<pre><code>var ourText = $(""+text+"").appendTo(self),
</code></pre>

<p>The thing is that I need a link inside there which toggles another div once clicked.</p>

<p><strong>The toggle:</strong></p>

<pre><code>$(".side-toggle").hide();
$('.trigger').click(function() {
    $(this).closest('.group').find('.side-toggle').slideToggle();
    return false; //Prevent the browser jump to the link anchor
});

$(".toggle").click(function() {
    $(this).next(".group").slideToggle();
});
</code></pre>

<p>The toggle works by itself, but not when I also implement the code text fill code.</p>

<p><strong>The html:</strong></p>

<pre><code>&lt;div class="quepasa"&gt;
  &lt;div class="large artist"&gt;
    &lt;span class="dyntextval"&gt;
      &lt;a title="&lt;?php the_title();?&gt;" href="#" class="trigger"&gt;
        &lt;?php if ( get_the_title() ) the_title(); else the_ID(); ?&gt;+
      &lt;/a&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I don't have enough jQuery knowledge to know how:
a) to put the link in?
b) Keep the toggle function</p>

<p>I hope someone out there can help me out.</p>
