Q:

How to make toggle element by clicking on another one, and re-toggle it when clicking on another element?

this thing seems to be easy but i'm pretty new on jQuery
Imagine i want to click on a div, it make appear another tag (p) (toggle) and at the same time, a third div (that was already shown) change color (to red for example). this is easy and i think i did this. The problem is i want to have the same mechanism : when clicking in another div, another one appears, 3rd div became red (also done) BUT how to make the first(s) ones reset as they were at the first time (2nd div hidden, and the third one won't be red) one by one (in my example red color appears for the two divs)
<div class="container">
 <div class="text" id="text-1" data-elem="text-1-too"> text 1 </div>
<p class="text-1-too" id="text-1-too" style="display:none;">text 1 too</p>
<div class="color" id="color-1">color</div>
 </div>

 <div class="container">
 <div class="text" id="text-2" data-elem="text-2-too"> text 2 </div>
 <p class="text-2-too" id="text-2-too" style="display:none;">text 2 too</p>
 <div class="color" id="color-2">color</div>
 </div>

.text{

margin-left:150px;
 }

.text-too{
margin-left:150px;
}

.new-color{
 color:red;
 }

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

                var elemID = $(this).data('elem');
                var elem = $('#' + elemID);
                elem.slideToggle();

                $('.color').toggleClass("new-color");
            });

This is a very basic code i've done here

A:

try this
$('.text').click(function(){
    $('p').not($(this).parent().find('p')).slideUp();
    $(this).parent().find('p').slideToggle();
    $('.color').not($(this).parent().find('.color')).removeClass("new-color");  
   $(this).parent().find('.color').toggleClass("new-color");
});

DEMO

