CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2686609
user2686609

Reputation: 109

Would like to close a div when open another div

I have been able to get my divs to open and change the image, but what I want to happen is when I open one the other one closes and I'm not sure how to go about this.

I have multiple divs like this. Each id for news is its own individual name: 

<div class="article" id="news">
    <h2>Hot News: Board Votes to Improve Highways</h2>
    <p>As Sporktown’s native and tourist population has increased, so has traffic. The good news is we are taking steps to deal with it. Before traffic becomes too much of a problem we have a plan to expand current highways and improve current ones.</p>
    <div class="moreText">
        <p>
            As part of the new plan, Route 7 will be expanded from a two-way highway to a four-lane highway. This will dramatically speed up North–South travel through that corridor.
        </p>
        <p>
            In addition to the road widening on Route 7, we have finally received approval to for the extension. The original plan called for Route to continue farther North. The project is finally cleared and work has already begun.
        </p>
    </div>
    <img src="img/more-button.png" width="51" height="16" class="changeTextButton">    
</div>

Here is the jquery script I have so far:

$(document).ready(function() 
{
    $('.changeTextButton').click( function() 
    {
        $(this).siblings('.moreText').slideToggle(500);
        if ( $(this).attr('src') == 'img/more-button.png') 
        {
            $(this).attr('src', 'img/less-button.png');
        }
        else 
        {
            $(this).attr('src', 'img/more-button.png'); 
        }
    });
});

Upvotes: 5

Views: 740

Answers (4)

Prabakaran Raja
Prabakaran Raja

Reputation: 720

Try this script

$(document).ready(function() {
var $parentid = "";

    $('.changeTextButton').click( function() {

          if($parentid!="" && $parentid!=$(this).parent().attr("id")){
               $("#"+$parentid).find(".moreText").slideUp();
          }

        $(this).siblings('.moreText').slideToggle(500);
        $parentid=$(this).parent().attr("id");

        if ( $(this).attr('src') == 'img/more-button.png') {
            $(this).attr('src', 'img/less-button.png');
        }
        else {
            $(this).attr('src', 'img/more-button.png'); 
        }

    });

});

Upvotes: 1

Somnath Kharat
Somnath Kharat

Reputation: 3600

Take global variable, an assign object/id of the div on every changeTextButton click to this variable and the get the id of prevoius id and hide it

declare global variable:

window.news;//news is global variable

to hide/show the div

$("#"+news).hide();
$("#newdiv").show();

Upvotes: 0

Robin
Robin

Reputation: 864

you can use the class .articles to close all other divs, then use the respective id of the div to show like

$(".articles").hide();
$("#news").show();

this will hide all divs having class articls and show that div having id as news

Upvotes: 4

Pat Dobson
Pat Dobson

Reputation: 3299

Just add 

$('.moreText').slideUp();

after this line:

$('.changeTextButton').click( function() {

This will slide up all instances of '.moreText' except the one that is currently opening.

Upvotes: 2

Related Questions