Toggle a div to show on click while toggling another to hide

Question

Have two divs that represent the same data only one goes into more detail.On the button click, I need to slideToggle the first div and then toggle open or slideDown the second. Basically switching out what is shown but it needs to be in two separate divs so it can not be a basic toggle in the same div. Any ideas please:

html: EDIT

<div id="basicTermsRow">
  <div class="row">
    <div class="col-sm-4">
      <div class="standardList">
        <ul>
          <li>Random Data</li>
          <li>This be the div I need to hide<span class="glyphicon glyphicon-cloud"></span></li>
        </ul>
      </div>
    </div>
 </div>
</div>

<div id="expandedTerms">
<div class="row">
  <div class="col-lg-12">
 <p>Good Bye</p>
 </div>

js:

$( "#editButton" ).click(function() {
$( "#basicTermsRow" ).slideToggle( "fast" );
});

Fiddle:

http://jsfiddle.net/ZB8u9/1/

Answer 1

The first thing you need to do is to make the expanded div initially hidden. Then to achieve what you want you can simply toggle both divs when the user presses the button. Like this:

<div id="expandedTerms" style="display:none">

Though it's preferrable to do the hiding in your CSS to avoid inline styling.

The script will look like this:

$( "#editButton" ).click(function() {
  $( "#basicTermsRow" ).slideToggle( "fast" );
  $( "#expandedTerms" ).slideToggle( "fast" );
});

http://jsfiddle.net/ZB8u9/3/

Answer 2

I think you need to hide one of them first, otherwise it is a bit nonsense. My suggestion

$( "#expandedTerms" ).hide();
$( "#editButton" ).click(function() {
    $( "#basicTermsRow" ).slideToggle();
    $( "#expandedTerms" ).slideToggle();
});

Answer 3

If I understand correctly, considering that these two entries are line items, I would suggest assigning them a class so that you can apply whatever kind of toggle you want to each of them. See the JSFiddle for an example.

$( "#editButton" ).click(function() {
$( ".hideDiv" ).slideToggle("fast");}
);