CODEWITHSUNDEEP
jquerytoggle
Ireally Rock
Ireally Rock

Reputation: 236

Jquery toggle using only Link

I have written a toggle function that changes the content and image size on click and it all works fine except that I have got stuck on how to fire the toggle using only the more button. At the moment the toggle will fire when you click anywhere within the guide box, but as I want add links in the copy but when you click on these it then closes it.

I think I can getting a bit stuck on parents, next etc

Any help would be much appreciated.

$(document).ready(function () {

$('.guide').click(function () {

    var text = $(this).children('.guidebox');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).find('.toggle').html('<< Less');                        
        //$(this).children('.myDiv2').append( $('.myDiv1>p') );
        $(".myDiv2", this).append( $(".myDiv1>p", this) );
        $(this).children('img.guideImage').animate({
            width: '412px',
            height: '275px'
          }, 500, function() {
          });   



    } else {
        text.slideUp('200');
        $(this).find('.toggle').html('More >>');
    //  $(this).children('.myDiv1').append( $('.myDiv2>p') );
        $(".myDiv1", this).append( $(".myDiv2>p", this) );  
        $(this).children('img.guideImage').animate({
            width: '198px',
            height: '132px'
          }, 500, function() {
          });   
    }

});

});

A demo is here http://jsfiddle.net/ktcle/CWXqS/

Upvotes: 0

Views: 188

Answers (2)

Will
Will

Reputation: 481

Would it not be easier to have the click event on the link rather than the div with the class guide?
So changing:

$('.guide').click(

to:

$('.toggle').click(

Just remember to return false at the end of the function otherwise the browser will try to navigate away from the page or reload it as it is a hyperlink.

So for example, using the link to fire the event the script would look like this

$('.toggle').click(function () {

        var parentDiv = $(this).parent();
        var text = $(parentDiv).children('.guidebox');  
 //...
        return false;
};

Upvotes: 0

giker
giker

Reputation: 4245

$('.guide a').click(function (e) {
e.preventDefault();
}

Add e.preventDefault()

EDIT:

I'm not sure if I understood you, but I've changed your script a bit http://jsfiddle.net/CWXqS/1/

Upvotes: 1

Related Questions