CODEWITHSUNDEEP
jqueryhyperlinktoggle
Linda
Linda

Reputation: 45

hyperlink not opening when toggle

I've been trying to solve this problem now for days, but I am stuck. What I want to do is the following:

When I enter the page I have a couple of links that when clicked should open a link and at the same time colapse and show the text in the container. When the link is clicked an image is changed. The only thing I cannot get to work is the opening of the link, it does not do anything.

I would be fantastic if someone could help me/thanx

<script>  
$(document).ready(function(){    
$(".toggle_container").hide();   

$("p.trigger").click(function(){  
$(this).toggleClass("active").next().slideToggle("slow");  
return false;  
});  

});
</script>

<style type="text/css">

p.trigger {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 background: url(image/arrow.gif) no-repeat;
 height: 21px;
 line-height: 21px;
 width: 230px;
 float: left;
}  
p.trigger a {  
 color: #fff;
 text-decoration: none;
 display: block;
}  
p.trigger a:hover { color: #ccc; }  
p.active {background-position: left bottom;}  
.toggle_container {  
 margin: 0 0 5px;
 padding: 0; 
 overflow: hidden;
 font-size: 1.2em;
 width: 230px;
 clear: both;
}  
.toggle_container .block {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 font-size:11px;
}  
</style>


<h2>Header</h2> 
<p class="trigger"><a style="color:#000;" href="http://www.loremipsum.com?id=er">&raquo; link</a></p>
<div class="toggle_container">
 <div class="block">
  &raquo; text
 </div>
</div>

Upvotes: 0

Views: 838

Answers (2)

Carlos
Carlos

Reputation: 2232

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  
    return false;  
});

The reason why your link is not "going anywhere" is because on your onClick event you have return false. You're telling the link to not follow it's default action, therefore it will not follow the link.

However, if you remove the return false, then whenever you click on the link, your page will just redirect.

My question is, do you want to change an image or do you want to open the link in a new window? Or do you want to just load the content into the page?

Assuming that you want to change the image when the link is clicked what you need to do is to change the SRC of your IMG.

HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/images/logos/ps_logo2.png">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; text
        </div>
        <img id='img' src="" />
    </div>

JAVASCRIPT

$(document).ready(function(){    
$(".toggle_container").hide();   

    $("p.trigger").click(function(){  
        $(this).toggleClass("active").next().slideToggle("slow");  
              $("#img").attr( 'src', $(this).find("a").attr("href") );

        return false;
    });  

});

If you want to open the link in a new window, then just change your HTML:

HTML

<a style="color:#000;" href="http://www.google.com/" target="_blank">&raquo; link</a></p>

In your Javascript, just remove your return false to follow the default link behavior.

JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

});

And if you want to load the content into the page:

HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/" target="_blank">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; text
        </div>
        <div id='load_content'></div>
    </div>

JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

    var link = $(this).find("a").attr("href");
    console.log(link);
    $("#load_content").load( link  );

    return false;
});

Upvotes: 1

Chris
Chris

Reputation: 3795

Do you want to open the href after the animation has complete? If so, you could use the callback on slideToggle() to fire a window.location event.

Upvotes: 0

Related Questions