Hide Other Divs when clicking new Div with the same class

Question

I cannot figure out how to add in the functionality of closing other divs when I click a div new div with the same class. I know it should be simple, but just can't get it to work. Here is the fiddle - http://jsfiddle.net/dnym5p1s/

added correct link

 <div class="option-heading">
            <div class="arrow-up">&#9650;</div>
            <div class="arrow-down">&#9660;</div>
            <h1>Year1</h1>
        </div>
        <div class="option-content">
            Content
        </div>
        <div class="option-heading">
            <div class="arrow-up">&#9650;</div>
            <div class="arrow-down">&#9660;</div>
            <h1>Year2</h1>
        </div>
        <div class="option-content">
            Content
        </div>
$(".option-content").hide(); $(".arrow-up").hide();
        $(".option-heading").click(function(){
                $(this).next(".option-content").slideToggle(150);
                $(this).find(".arrow-up, .arrow-down").toggle();
        });

Answer 1

This would do it:

$(".option-content,.arrow-up").hide();
$(".option-heading").click(function () {
    $(".option-content").not($(this).next()).slideUp(250);
    $(".option-heading").not(this).find("div.arrow-up").hide();
    $(".option-heading").not(this).find("div.arrow-down").show();
    $(this).next(".option-content").slideToggle(250);
    $(this).find(".arrow-up, .arrow-down").toggle();
});

jsFiddle example

Answer 2

Just add $(".option-content").hide(); on top of your click listener like so:

$(".option-heading").click(function(){
   $(".option-content").hide();
   $(this).next(".option-content").slideToggle(150);
   $(this).find(".arrow-up, .arrow-down").toggle();
});