how to open an element using the stored value in the cookie

how to open an element using the stored value in the cookie. I was able to retrieve the cookie value from the clicked element in the first page but then how can i use the cookie value to .show an element in my page?

First Page:

<script>
    $(document).ready(function(){
        //jquery toggle menu
        $(".product-contents").hide();
        $("div.product-header").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");
        });

        //setting the clicked element value in the cookie
        $("#product-list div").click(function() {
            var index = $("#product-list div").index(this);
            $.cookie("product_name", index);
        });
    });
 </script>

Toggle Menu

<div id="product-list">
<div class="product-wrapper">
    <div class="product-header">sampletest</div>
    <div class="product-contents" style="display: none;">
    <div class="product-subheader"><a href="/printing/sampletest/18">flat black matte</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/19">flat black matte</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/30">product two</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/24">In augue tellus&开发者_运维问答lt;/a></div>
</div>
<div class="product-wrapper">
    <div class="product-header">sampletest</div>
    <div class="product-contents" style="display: none;">
    <div class="product-subheader"><a href="/printing/sampletest/33">flat black matte1</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/34">flat black matte3</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/35">product two4</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/36">In augue tellus55</a></div>
</div>
<div class="product-wrapper">
    <div class="product-header">sampletest</div>
    <div class="product-contents" style="display: none;">
    <div class="product-subheader"><a href="/printing/sampletest/66">flat black matte3</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/77">flat black matte3</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/88">product two4</a></div>
    <div class="product-subheader"><a href="/printing/sampletest/99">In augue tellus2</a></div>
</div>

second page

<script>
    $(document).ready(function(){
        alert($.cookie("product_name")); //cookie value is displayed


    $(".product-contents").hide();
        $("div.product-header").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");
        });

    });

how can i use the cookie value to open the selected element from first page to open or .show() the element in the second page

Try:

$("#product-list div").get( $.cookie("product_name") ).show();

Though I think you may mean $("#product-list > div") both where you set and get the cookie.