Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
I am currently trying to implement the show/hide technique using JQuery on my products pages.
 
The idea:
 
I want to show all of my product images with a 'Show description' button for each. When this is clicked, the description for the relevant product will be displayed.
 
Currently, when I click a 'Show description' link for a product, it shows the description div's for all the products on the page. I just want the relevant description to be displayed, not all description div's.
 
JavaScript in Header:
 
<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();
 
    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });
 
});
 
</script>
 

HTML:
 
<div class="product clearfix">
 
<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_hide">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="show_hide">Hide</a></p></div>
 
</div>
 
<div class="product clearfix">
 
<h4>Cupcake Bath Bomb - La Vie en Rose</h4>
 
<p>Muffin Size in it's own Cake Box, this is the most elegant cupcake bathbomb.</p>
 
<a href="#" class="show_hide">See Full Description</a>
<div class="productDescription">
<p>Muffin Size in it's own Cake Box, this is the most elegant and luxurious handmade cupcake bathbomb bath treat as it contains pure essential oils of lavender and rose. Perfect for those who need to unwind and want a bit of indulgence.<br/>
If you think this Bath-Patisserie creation is too pretty to use, place it on your bathroom shelf and let the aromas fill the room!<br/>
<b>Ingredients:</b>
Sodium Bicarbonate, Citric Acid, Sucrose, Aqua, Egg Powder (Ovum), Prunus Amygdalus Dulcis, Sodium Lauryl Sulphate, Lavandula Officinalis, Rosa damascena, Potassium Bitartrate, Hamamelis Virginiana Distillate, GERANIOL, LIMONENE, LINALOOL, CITRAL, EUGENOL, CITRONELLOL, FARNESOL. <a href="#" class="show_hide">Hide</a></p></div>
</div>
Posted 13-Sep-12 11:20am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

<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>
  Permalink  
Comments
sanjay_gope at 9-Dec-12 23:28pm
   
sdsd
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

<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>
  Permalink  
v4
Comments
zakaryfaithfull at 14-Sep-12 11:16am
   
Unfortunately this did not work, it stopped the show/hide from working at all :/
ShotDriller at 14-Sep-12 11:37am
   
The code that i gave doesnt need Hide anchor. Click on "showDescription" will show the description. click again on the same "showDescription" will hide the Description. You can show "Hide description" anchor tag when description is expanded.
ShotDriller at 14-Sep-12 11:48am
   
Updated functionality/Code provided. just copy&paste provided code and check. if its what you want.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

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;}
  Permalink  
Comments
shabari7 at 17-Jan-13 7:31am
   
yeah

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 BillWoodruff 360
1 Mathew Soji 309
2 DamithSL 225
3 Afzaal Ahmad Zeeshan 202
4 Maciej Los 190
0 OriginalGriff 6,249
1 Sergey Alexandrovich Kryukov 5,853
2 DamithSL 5,183
3 Manas Bhardwaj 4,673
4 Maciej Los 3,865


Advertise | Privacy | Mobile
Web03 | 2.8.1411019.1 | Last Updated 14 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100