Show/hide using two links

I'开发者_JAVA技巧m trying to show/hide content using 2 different links and change their text when clicked.

Here's the full javascript. Links are added to the markup using jquery to 2 different divs. The links should achieve the same result of opening/closing the hidden content and changing the link text.

The 'this' keyword works but doesn't change the text on the links. If I use the selector '.products-tech-show p' instead. The text changes but doesn't hide the panel.

Any ideas?

var maxHeight = $('.products-techspec-container').height();
/* This gets the first few rows and their height before making the box shorter 
Instead of just giving it a fixed height, it calcs the height of them instead */
var numOfRows = $('.products-techspec-container table tr').length;
var height = 0;
for (var i = 0; i < numOfRows; i++) {
    h = $('.products-techspec-container table tr:nth-child(' + i + ')').height();       
    if (height+h < 202) {
        height+=h;  
    } else {
        break;  
    }
}

/* product slides */    
$('.products-techspec-container, .products-desciption-container').css({ 'height': height + 'px', 'overflow': 'hidden' });
// Add the JS sliding toggle instead of it being in the HTML
//alert(height);
if(height>=129)
{
    $('.products-techspec-container, .products-desciption-container').after('<div class="products-tech-show"><div class="sliderbar"><div class="slidertab"><p class="icon-arrow-down-orange"><a href="#" class="products-techspec-toggle"><strong>Show more</strong> product details</a></p></div></div></div>');

}else{

    $('.products-techspec-container, .products-desciption-container').after('<div class="products-tech-show"><div class="sliderbar"></div></div>');
}

$('.products-techspec-toggle').click(function() {
    $('.products-tech-show p').toggleClass("bgpos-arrow-up-orange");
    var strong = $(this).find('strong');
    if (strong.text() == "Show fewer") {            
        strong.text("Show more");           
        var SupportDiv = document.getElementById('technical-spec');     
        //Scroll to location of SupportDiv on load
        window.scroll(0,findPos(SupportDiv));           
        $('.products-techspec-container, .products-desciption-container').stop().animate({ 'height' : height + 'px' }, 'slow');         
    } else {            
        strong.text("Show fewer");          
        $('.products-techspec-container, .products-desciption-container').stop().animate({ 'height' :maxHeight  + "px" }, 'slow');          
    }
    return false;
});

---

When $(this) refers to the p tag, you can change the text - so just use $(this).parent() to toggle the parent "panel" (you can pass a selector into the .parent() function call if you need to jump several "levels" up.