Vorrei chiudere un div quando apri un altro div

Question

Sono stato in grado di ottenere il mio div s per aprire e cambiare l'immagine, ma quello che voglio succedere è quando apro l'altro si chiude e non sono sicuro come andare su questo.

Ho più div s in questo modo. Ogni id per le notizie è il suo proprio nome individuale:

<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> 

Ecco lo script di jQuery che ho finora:

$(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'); 
     } 
    }); 
}); 

Answer 1

Basta aggiungere

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

dopo questa linea:

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

Ciò farà scorrere tutte le istanze di ".moreText" tranne quella attualmente in fase di apertura.

Answer 2

è possibile utilizzare i .articles classe di chiudere tutti gli altri div, quindi utilizzare il relativo id del div per mostrare come

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

In questo modo nascondere tutti i div avere articls classe e spettacolo che hanno div id come notizie

Answer 3

Prendere variabile globale, un oggetto di assegnazione/id del div su ogni changeTextButton clicca per questa variabile e l'ottenere l'ID di id PREVIOUS e nasconderlo

dichiarare variabile globale:

window.news;//news is global variable 

per nascondere/mostrare il div

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

Answer 4

Prova questo 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'); 
     } 

    }); 

});