CODEWITHSUNDEEP
jquerycssclickhover
Robbie Capps
Robbie Capps

Reputation: 467

How can I change this javascript hover to two separate clicks?

I have seen other questions similar to mine, but I followed the advice of others and still cannot get this to work.

$("#TyPhoto").click(function(){
    $("#TyBio").show("slow");
    $("#TyPhoto").setAttribute("id", "#newTy");
    });
$("#newTy").click(function () {
    $("#TyBio").hide(1000);
    $("#newTy").setAttribute("id", "#TyPhoto");
    });

I am trying to show each biography text on a click and then hide it on the second click. The first click works, but the second one does not hide the text. The live site is located here.

The CSS is just a display:none for #TyBio.

Can anyone help? Thanks!

Upvotes: 0

Views: 65

Answers (3)

krishwader
krishwader

Reputation: 11381

Solution

You could use the toggle method if all you're going to do is hide/show: 

$("#TyPhoto").click(function(){   
    $("#TyBio").toggle("slow"); //or toggle(1000)
});

API docs : http://api.jquery.com/toggle/

Alternatives

Method 1

You've got an image like this :

<img id="DafPhoto" class="insetshadow" src="" width="352" height="272">

And a div like this which contains the bio like this : 

<div id="DafBio" style="display: none;">.</div>

So on every click is going to be unique if youre going to use IDs. Try changing the image tag to something like this : 

<img class="insetshadow" data-bio="DafBio" src="" width="352" height="272">

(Added a data-bio attribute to it and removed the id)

Then change your clicks to this : 

$(".insetshadow").click(function(){   
    var bioId = $(this).data("bio");
    $("#" + bioId).toggle("slow"); //or toggle(1000)
});

Method 2

Or even simpler, you seem to have this kind of a structure : 

<ul id="navlist">
 <li>
    <img class="insetshadow" >
 </li>
 <!--extra stuff-->
 <li>
    <img class="insetshadow" >
 </li>
</ul>

<span id="descriptblock" class="outshadow">
<div class="bio" id="TyBio"></div>
   <!--extra stuff-->
<div class="bio" id="DawnBio"></div>
</span>

Note that I've added extra classes to both. Remove the IDs and keep it this way. Now you could use index property to match the elements : 

 $(".insetshadow").click(function(){   
        $(".bio").hide();
        var index= $(this).index();
        $(".bio:eq(" + index + ")").toggle("slow"); //or toggle(1000)
 });

Edit

To add extra events to this : 

 $(".insetshadow").on("click mouseover mouseout", function(){   
        //hide the rest 
        $(".bio").hide();
        var index= $(this).index();
        $(".bio:eq(" + index + ")").toggle("slow"); //or toggle(1000)
 });

Upvotes: 2

ffflabs
ffflabs

Reputation: 17511

I see two mistakes here. First, the ID attribute doesn't include the #. So, in order to set the "newTy" id you should do

$("#TyPhoto").click(function(){
    $("#TyBio").show("slow");
    $("#TyPhoto").setAttribute("id", "newTy");
});

Second, I believe there's no newTy element on the beggining, so you cannot add listeners to it. You should delegate instead:

$(document).on("click","#newTy",function () {
    $("#TyBio").hide(1000);
    $("#newTy").setAttribute("id", "TyPhoto");
});

Yeah, I removed the # from TyPhoto too.

Upvotes: 0

nirazul
nirazul

Reputation: 3955

Pack both in one click handler and just toggle a class to alternate between the two states. This would come in handy when more actions need to be executed

$("#TyPhoto").click(function(){
    var $this = $(this);
    $this.toggleClass('toggled');

    if($this.hasClass('toggled')) {
        // ACTION ON TOGGLE ON
    } else {
        // ACTION ON TOGGLE OFF
    }
});

Upvotes: 0

Related Questions