Simplify Jquery Hide Divs

looking to simplify the jquery function bellow, which hides and shows a number divs with click(), could use next(), but not familiar with the way to implement it.

   $(function() {
    $('a#deliveryLink').addClass('selected');
    $('#sizeguideDiv, #returnsDiv, #currencyDiv').hide();
    $('a#sizeguideLink').click(function() {
        $(this).addClass('selected');
        $('a#deliveryLink, a#returnsLink, a#currencyLink').removeClass('selected');
        $('#sizeguideDiv').show();
        $('#deliveryDiv, #returnsDiv, #currencyDiv').hide();
        return false;
    });
    $('a#returnsLink').click(function() {
        $(this).addClass('selected');
        $('a#deliveryLink, a#sizeguideLink, a#currencyLink').removeClass('selected');
        $('#returnsDiv').show();
        $('#sizeguideDiv, #deliveryDiv, #currencyDiv').hide();
        return false;
    });
    $('a#deliveryLink').click(function() {
        $(this).addClass('selected');
        $('a#returnsLink, a#sizeguideLink, a#currencyLink').removeClass('selected');
        $('#deliveryDiv').show();
        $('#sizeguideDiv, #returnsDiv, #currencyDiv').hide();
        return false;
    });
    开发者_运维百科$('a#currencyLink').click(function() {
        $(this).addClass('selected');
        $('a#returnsLink, a#sizeguideLink, a#deliveryLink').removeClass('selected');
        $('#currencyDiv').show();
        $('#sizeguideDiv, #returnsDiv, #deliveryDiv').hide();
        return false;
    });
});

html code

<div class="productPagenav">

    <a id="sizeguideLink" href="#">Size  Guide</a>
    <a id="returnsLink" href="#">Returns</a>
    <a id="deliveryLink" href="#">Delivery</a>
    <a id="currencyLink" href="#">Currencies</a>

    <div id="sizeguideDiv">
    </div>

    <div id="returnsDiv">
    </div>

    <div id="deliveryDiv">
    </div>

    <div id="currencyDiv">
    </div>

    </div>

---

i don't know exactly what you are trying to solve, but it looks like you are trying something like an accordion...

maybe this link could help you http://docs.jquery.com/UI/Accordion

Html

<div id="accordion">

   <h3><a href="#">Size Guide</a></h3>
   <div> size guide content </div>

   <h3><a href="#">Returns</a></h3>
   <div> returns content </div>

   <h3><a href="#">Delivery</a></h3>
   <div> devlivery content </div>
</div>

JQuery/Javascript

$('#accordion').accordion();

hth

---

add class to all anchors and

$('a.someclass').click(function() {
$('a.someclass').removeClass('selected').each(function() {
    $(this).next('div').hide(); });

$(this).addClass('selected').next('div').show();

})

---

HTML:

<div class="productPagenav">

    <ul class="nav">
        <li> <a href="#">Size  Guide </a> </li>
        <li> <a href="#">Returns     </a> </li>
        <li> <a href="#">Delivery    </a> </li>
        <li> <a href="#">Currencies  </a> </li>
    </ul>

    <ul class="content">
        <li>
            Size Guide
        </li>
        <li>
            Returns
        </li>
        <li>
            Delivery
        </li>
        <li>
            Currencies
        </li>
    </ul>

</div>

JavaScript:

$('.nav a').click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');
    $(this).closest('ul').next().children()
            .eq( $(this).parent().index() ).show().siblings().hide();
    return false;
}).triggerHandler('click');

Live demo: http://jsfiddle.net/simevidas/34KWj/

---

It is even simpler without the anchors: http://jsfiddle.net/simevidas/34KWj/1/

---

try this:

function showDiv(which){
$('.productPagenav a').click(function() {
$('.productPagenav a').removeClass('selected');
$('.productPagenav div').hide();
$(this).addClass('selected');
$('#' + which).show();
})
}

apply like this: showDiv('deliveryDiv');

EDIT: Refinement, just add a "rel" attribute to every link with the same name as the ID, check my example:

http://jsfiddle.net/jackJoe/QL3Y9/

here's the code:

$('.productPagenav a').click(function() {
    $('.productPagenav a').removeClass('selected');
    $('.productPagenav div').hide();
    $(this).addClass('selected');
    $("#" + $(this).attr("rel")).show();
});

---

I got it pretty compact http://jsfiddle.net/grFQu/

html:

<div class="productPagenav">
    <span id="sizeguideLink" data-area="sizeguideDiv" class="link">Size  Guide</span>
    <span id="returnsLink" data-area="returnsDiv" class="link">Returns</span>
    <span id="deliveryLink" data-area="deliveryDiv" class="link">Delivery</span>
    <span id="currencyLink" data-area="currencyDiv" class="link">Currencies</span>

    <div id="sizeguideDiv" class="area">1</div>
    <div id="returnsDiv" class="area">2</div>
    <div id="deliveryDiv" class="area selected">3</div>
    <div id="currencyDiv" class="area">4</div>
</div>

css:

.link {
    cursor:pointer;
    text-decoration:underline;
    color:Blue;
}

.area {
    display:none;
}

.selected {
    display:block;
}

js:

$(function(){
    $('.link').click(function(){
        $(".area").removeClass('selected');

        var id = "#" + $(this).data("area");
        $(id).addClass("selected");
    });
});

---

Here is an example of using jQuery data to configure the menu to a certain div.

HTML:

    <div id="anchor-wrap">
        <a id="sizeguideLink" href="#" data-id="sizeguideDiv">Size  Guide</a>
        <a id="returnsLink" href="#" data-id="returnsDiv">Returns</a>
        <a id="deliveryLink" href="#" data-id="deliveryDiv">Delivery</a>
        <a id="currencyLink" href="#" data-id="currencyDiv">Currencies</a>
    </div>

    <div id="div-wrap">
        <div id="sizeguideDiv">
            size guide
        </div>

        <div id="returnsDiv">
            returns
        </div>

        <div id="deliveryDiv">
            delivery
        </div>

        <div id="currencyDiv">
            currency
        </div>

    </div>
</div>

CSS:

#div-wrap > div{
    display: none;   
}

#div-wrap > div.selected{
    display: block;
}

#anchor-wrap a{
    background-color: #fff;
    color: #000;
}

#anchor-wrap a.selected{
    background-color: #000;
    color: #fff;
}

JavaScript:

$(function() {
    // initialize
    var divId = $("#anchor-wrap a:first").addClass("selected").data("id");
    $("#"+divId).addClass("selected");
    $("#anchor-wrap a").click(function(evt) {
        evt.preventDefault();
        var divId = $(this).data("id");
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $("#" + divId).addClass("selected");
    });
});

The reason I like this is that the JavaScript / CSS is generic and remains the same as you add new links. You only need to configure the jQuery 'data-id' attribute. Here is a jsFiddle

http://jsfiddle.net/hqcVZ/2/

Hope that helps.

Bob