Question

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();
    });
});

Answer 1

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');
});