toggle not working properly

Question

I have three same divs repeated and I have a view detail link on click of which the hidden div is shown and one class .openPanel is added in a div which is working fine but that same is happening in another two divs also. I want this to be worked in one div at one time.

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<script>
    $('a#viewDetail').click(function (e) {
        $('#detailPanel').toggle();
        $('a#viewDetail').closest('.result').toggleClass('openPanel');
        return false;
    });
</script>

Answer 1

Put your div with class detailBg and div with id detailPanel in a single div with class say huh, then apply below code, then i think it may help you achieve what you want:

        jQuery("a#viewDetail").click(function(e){
            var $this = jQuery(this);
            jQuery(this).closest(".huh").toggleClass("openPanel");
            jQuery(this).closest(".huh").children("#detailPanel").slideToggle();
            jQuery(this).hide();
            jQuery(this).siblings("#hideDetail").show();
            $('a#viewDetail').not($this).each(function(){
                jQuery(this).closest(".huh").removeClass("openPanel");
                $(this).closest(".huh").children("#detailPanel").slideUp();  
                jQuery(this).show();
                jQuery(this).siblings("#hideDetail").hide();
             });
             return false;
        });

        jQuery("a#hideDetail").click(function(e){
            jQuery(this).closest(".huh").removeClass("openPanel");
            jQuery(this).closest(".huh").children("#detailPanel").slideUp();
            jQuery(this).siblings("#viewDetail").show();
            jQuery(this).hide();
            return false;
        });

Answer 2

$('a#viewDetail').click(function (e) {
  $(this).toggle(); // <-------only edit made
  $('a#viewDetail').closest('.result').toggleClass('openPanel');
  return false;
});

Using "this" as opposed to a unique identifier will accomplish what I believe you want (toggle the item that's being clicked). And then clean up your code to remove all the redundant IDs. They're not needed (at all) from what I can see.

Answer 3

An ID must be unique for a given HTML document. You are giving the same ID to several divs:

<div class="viewDetails" id="detailPanel" style="display: none;">

So when this code runs:

$('#detailPanel').toggle();

the context doesn't matter, you are theoretically targetting one element with an id of detailPanel. jQuery finds the first one, no matter which link you clicked and toggles it on or off.

At least that is what should happen: see fiddle.

I don't know what the .openPanel class is supposed to do, but if you know how to use closest() in jQuery then you can use that approach to replace your toggle() code.