单击其他div链接时关闭div jquery

Question

Need some help closing an expanding div when a link to open another expanding div is clicked.

I've tried using examples from other functions but I don't have a good enough understanding to alter it to work.

Here's the HTML:

<div class="service" id="service-box1">
    <a class="learn-more" id="show1" data-href="service1">Learn More</a>
</div>
<div class="service" id="service-box2">
    <a class="learn-more" id="show2" data-href="service2">Learn More</a>
</div>
<div class="service-content" id="service1">
    <p>Title</p>
</div>
<div class="service-content" id="service2">
    <p>Title</p>
</div>

Here's the function:

$('document').ready(function() {
    $('#show1').click(function() {
        var $div = $('#' + $(this).data('href'));
        $('#serivce1').not($div).hide();
        $div.slideToggle();
    });
});

$('document').ready(function() {
    $('#show2').click(function() {
        var $div = $('#' + $(this).data('href'));
        $('#serivce2').not($div).hide();
        $div.slideToggle();
    });
});

So if the #show1 button is clicked and displays the #service1 div then the #show2 button is clicked, the #service1 div should close and open the #service2 div .

Answer 1

I think you can try to use onclick function.

HTML

<div class="service" id="service-box1">
    <a class="learn-more" id="show1" data-href="service1" onclick="showservice1()">Learn More</a>
</div>

<div class="service" id="service-box2">
    <a class="learn-more" id="show2" data-href="service2" onclick="showservice2()">Learn More</a>
</div>

JQUERY/JS

function showservice1() {
    $('#service1').show(100);
    $('#service2').hide(100);
}

function showservice2() {
    $('#service1').show(100);
    $('#service2').hide(100);
}

And 1 more thing...

I saw you TYPO where you declare ID as "service1" and "service2" but in jquery you call "serivce1" and "serivce2". That's why it wont work

Hopefully this help you