JQuery Show/Hide additional changes

Question

I have the following JQuery code:

jQuery(function($) {
    $j(".follow_btn")
         .click(
        function() {
                var element = $(this);
                var I = element.attr("id");
            var info = 'id=' + I;
            $.ajax({
                type : "POST",
                url : "action/follow.php?friend_id=<?php echo $row_inactive_user_settings['user_id']; ?>",
                data : info,
                success : function() {
                }
            });
            $("#sb_follow" + I).hide();
            $("#sb_unfollow" + I).show();
            return false;
        });
     });
jQuery(function($) {
    $j(".unfollow_btn").click(
        function() {
            var element = $(this);
            var I = element.attr("id");
            var info = 'id=' + I;
            $.ajax({
                type : "POST",
                url : "action/unfollow.php?friend_id=<?php echo $row_inactive_user_settings['user_id']; ?>",
                data : info,
                success : function() {
                    }
            });
            $("#sb_unfollow" + I).hide();
            $("#sb_follow" + I).show();
            return false;
        });
    });

and following HTML code which trigger above JQuery:

<div id="sb_follow1"
<?php if ($totalRows_sb_track > 0) { echo 'style="display:none"';}?>>
    <a href="#" class="follow_btn" id="1">Follow</a>
</div>
<div id="sb_unfollow1"
<?php if ($totalRows_sb_track == 0) { echo 'style="display:none"';}?>>
    <a href="#" class="unfollow_btn" id="1">unFollow</a>
</div>

now what I need is to after I click on "Follow" link from above HTML code to show below container:

<dl id="subscribe">
 <ul id="ulg">
    <li>List one</li>
    <li>List two</li>
    <li>List three</li>
 </ul>
</dl>

And when I click on "unFollow" to hide that container I want to keep above JQuery code but also add this additional function. If someone is able to do necessary changes in above JQuery code that would be lovely. I also want to note that I have attached Prototype.js file to my pages.

Answer 1

Your jQuery would look like this:

jQuery(function($) {
    $j(".follow_btn")
            .click(
                    function() {
                        var element = $(this);
                        var I = element.attr("id");
                        var info = 'id=' + I;
                        $
                                .ajax({
                                    type : "POST",
                                    url : "action/follow.php?friend_id=<?php echo $row_inactive_user_settings['user_id']; ?>",
                                    data : info,
                                    success : function() {
                                    }
                                });
                        $("#sb_follow" + I).hide();
                        $("#sb_unfollow" + I).show();
                        $("#subscribe").show();
                        return false;
                    });
});
jQuery(function($) {
    $j(".unfollow_btn")
            .click(
                    function() {
                        var element = $(this);
                        var I = element.attr("id");
                        var info = 'id=' + I;
                        $
                                .ajax({
                                    type : "POST",
                                    url : "action/unfollow.php?friend_id=<?php echo $row_inactive_user_settings['user_id']; ?>",
                                    data : info,
                                    success : function() {
                                    }
                                });
                        $("#sb_unfollow" + I).hide();
                        $("#sb_follow" + I).show();
                        $("#subscribe").hide();
                        return false;
                    });
});