CODEWITHSUNDEEP
jquery
Patrick Allmond
Patrick Allmond

Reputation: 11

My jquery div is appearing then disappearing

I took over code from another developer. There is a small image and comment box that briefly shows when the page loads then disappears. It should be visible all of the time. I think it is related to some jquery on the page but I have no clue how it works.

Here is the div that appears and disappears:

<a href="#comments_box_b34af24f72ea4d630292ff3a4c4fb4e6" class="comments_link" style="margin-left:5px">
    <img src="/images/user_comment.png" border="0" alt="Comments">
</a>

<div id="comments_box_b34af24f72ea4d630292ff3a4c4fb4e6" style="display:none”>
    <label style="font-weight:normal; font-size:14px;">Comments:</label>
    <textarea name="comments_b34af24f72ea4d630292ff3a4c4fb4e6"></textarea>
</div>
</div>

And here is the jquery on the page. 

$(document).ready(function(){
    $(".comments_link").toggle(function(){
        $($(this).attr('href')).show('slow');
    },function(){
        $($(this).attr('href')).hide('slow');
    });
});

Why does it not stay visible and how can I fix it?

Upvotes: 1

Views: 915

Answers (2)

GCallie
GCallie

Reputation: 413

Try to change your jQuery to 

$(".comments_link").click(function(){
    if($($(this).attr('href')).css("display") == "none")
    {
        $($(this).attr('href')).show('slow');
    }
    else
    {
        $($(this).attr('href')).hide('slow');
    }
});

I think this is what you want..

See here for a DEMO

If you want hidden as default just add

$(function(){
    $($(".comments_link").attr('href')).css("display", "none");
});

Like you can see in this DEMO

Upvotes: -1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

First of all, when taking code of other developers, always check the date. The toggle you took was the click toggle of jQuery, which is now deprecated and removed.

Now .toggle is used only for the visibility purpose. it accept 2 argument: duration and callback.

Here what you code is doing :

$(document).ready(function(){
    $(".comments_link").toggle(function(){ //You set duration to a function, it execute a function
        $($(this).attr('href')).show('slow'); //The function show your element
    },function(){ //Set a callback, so after toggle finish, it call that function
        $($(this).attr('href')).hide('slow'); //The function hide the element
    });
});

What you want is either

A) show the element on load :

$(document).ready(function(){
    var href = $(".comments_link").attr('href');
    $(href).show('slow');
});

B) show/hide element on click :

$(document).ready(function(){
    $(".comments_link").click(function(){
        $($(this).attr('href')).toggle('slow');
    });
});

Upvotes: 3

Related Questions