Show/Hide DIV using JQuery

<h1>
        Show/Hide using jQuery</h1>
    <a id="showhidetrigger" href="#">show/hide</a>
    <div id="showhidetarget">
        This is the box that is hidden and shown.
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#showhidetarget').hide();

            $('a#showhidetrigger').click(function () {
                $('#showhidetarget').toggle(400);
            });
        });
    </script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
        $(".productDescription").hide();
        $(".show_hide").show();
        $(".hide_show").hide();

    $('.show_hide').click(function(){
    $(this).parent().find('.productDescription').slideToggle();
         $(this).parent().find(".show_hide").hide();
        $(this).parent().find(".hide_show").show();
    });

 $('.hide_show').click(function(){
    $(this).parent().find('.productDescription').slideToggle();
         $(this).parent().find(".show_hide").show();
        $(this).parent().find(".hide_show").hide();

    });

});

</script>

<div class="product clearfix">
    <h4>Bath Bomb Cake Slice - Melting Heart</h4>
    <p>Drizzled with soap thiauthentic.</p>
    <a href="#" class="show_hide">See Full Description</a>
    <a href="#" class="hide_show">Hide Description</a>
    <div class="productDescription">
       <p>This very </p>
    </div>
</div>

<div class="product clearfix">
    <h4>Cupcake Bath Bomb - La Vie en Rose</h4>
    <p>Muffin Size in it's o cupcake bathbomb.</p>
    <a href="#" class="show_hide">See Full Description</a>
    <a href="#" class="hide_show">Hide Description</a>
    <div class="productDescription">
        <p>Muffin Size in </p>
    </div>
</div>

The best approach for showing/hiding elements is a combination of HTML, CSS and JavaScript. If you want something hidden, find a suitable parent element and assign a "hidden" flag class to it. Then you can easily control which elements inside the parent should be hidden. If you want to unhide then simply remove the "hidden" flag class.

See
http://jsfiddle.net/TEXYa/[^]

The "hidden" flag class is called "hide_description" and is assigned to the "product".

The JavaScript code is then very simple and clear:

$(document).ready(function(){

    $(".show").click(function() {
        $(this).parents(".product").removeClass("hide_description");
    });
    $(".hide").click(function() {
        $(this).parents(".product").addClass("hide_description");
    });
 
});
​

One good thing about this approach is that you can not only hide/show elements but also set any additional attributes based on the "hidden" flag. E.g. if the product or description should use a background image to reflect the shown/hidden state (e.g. plus/minus icon) then you could just update a related CSS for this, without any need to write additional JavaScript code.

Modified HTML code:

<div class="product clearfix hide_description">
<h4>Bath Bomb Cake Slice - Melting Heart</h4>
<p>Drizzled with soap this Bath Bomb Cake Slice looks so authentic.</p>

<a href="#" class="show">See Full Description</a>
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. 
<a href="#" class="hide">Hide</a>
</p></div>
</div>

Related CSS:

.productDescription {display:block;}
.hide_description .productDescription {display:none;}
.show {display:none;}
.hide {display:inline;}
.hide_description .show {display:inline;}
.hide_description .hide {display:none;}