CODEWITHSUNDEEP
jquery
Fero
Fero

Reputation: 13315

Show/Hide div using jquery - Not working

I am using this function to show/hide a div.

But this is not working.

It's working only for hide and not working for show. And i need to show and hide the fields in slow style.

How can this be done?

what was my mistake here...

$(document).ready(function(){
    $("#field-reviewers-items").hide();
    $('#edit-field-openforreview-value-1').click(function(){
        $("#field-reviewers-items").show();
    });
    $('#edit-field-openforreview-value-1').click(function(){
        $("#field-reviewers-items").hide();
    });
});

Upvotes: 1

Views: 3083

Answers (2)

Sampson
Sampson

Reputation: 268462

You are setting the click method twice, meaning $.hide() will run immediately after $.show(). This takes place so quickly that it seems as though $.show() isn't even working. Instead, set the click once and instruct it to toggle the visibility:

$("#edit-field-openforreview-value-1").click(function(){
  $("#field-reviewers-items").fadeToggle('slow');
});

This code assumes you wanted the same element to toggle the visibility of the #field-reviewers-items element; I felt this was a safe assumption since your selector was the same for both click events. It's possible that you had a typo though, and the second selector was supposed to be value-2 instead:

var $fieldRevItems = $("#field-reviewers-items");

$("#edit-field-openforreview-value-1").click(function(){
  $fieldRevItems.show('slow');
});

$("#edit-field-openforreview-value-2").click(function(){
  $fieldRevItems.hide('slow');
});

Upvotes: 3

kei
kei

Reputation: 20521

$('#edit-field-openforreview-value-1').click(function() {
    $("#field-reviewers-items").fadeToggle('slow');
});

Showing/hiding in "slow" style

Upvotes: 2

Related Questions