CODEWITHSUNDEEP
javascriptjquery
isabel018
isabel018

Reputation: 21

buttons to activate buttons that toggle from one div to another

Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...

I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:

<div class="flr-wrap">
    <ul>
        <li><a class="button active" data-rel="#content-a" href="#">a button</a>
        </li>
        <li><a class="button" data-rel="#content-b" href="#">b button</a>
        </li>
    </ul>
    <div class="flr-inner">
        <div class="container" id="content-a">AAA</div>
        <div class="container" id="content-b">BBB</div>
    </div>
</div>

// set content on click
$('.button').click(function (e) {
    e.preventDefault();
    setContent($(this));
});

// set content on load
$('.button.active').length && setContent($('.button.active'));

function setContent($el) {
    $('.button').removeClass('active');
    $('.container').hide();

    $el.addClass('active');
    $($el.data('rel')).show();
}

from here: jsfiddle

What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?

Many thanks in advance for any help!

Upvotes: 0

Views: 743

Answers (2)

Ivan Batić
Ivan Batić

Reputation: 476

Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing. Here's an example of how this works:

http://jsfiddle.net/ivanbatic/b43m405x/

Javascript: 

$('.activator').on('click', function () {
    var target = $(this).attr('data-target');
    $('.panel').removeClass('active');
    $(target).toggleClass('active');
});

HTML

<section>
    <button class="activator" data-target=".panel-a">Blue</button>
    <button class="activator" data-target=".panel-b">Yellow</button>
<section>
    <div class="panel active panel-a">First Panel</div>
    <div class="panel panel-b">Second Panel</div>
</section>
<section>
    <button class="activator" data-target=".panel-a">Blue</button>
    <button class="activator" data-target=".panel-b">Yellow</button>
</section>

Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action. If you want buttons to look like plain text, use CSS for styling.

Upvotes: 1

Icepickle
Icepickle

Reputation: 12796

You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags

function setContent($el) {
  var rel = $el.data('rel');
  $('.active').removeClass('active');
  $('.container').hide();
  $('[data-rel="' + rel + '"]').addClass('active');
  $(rel).show();
}

$(function() {
  // the right place to fire the initial setContent (all scripts are ready and page is loaded)
  setContent($('.button.active'));

  // add event handlers in ready event (DOM is most surely there)
  $('.button').click(function(e) {
    e.preventDefault();
    setContent($(this));
  });
});
.container {
  display: none;
}
.button.active {
  color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
  <ul>
    <li><a class="button active" data-rel="#content-a" href="#">a button</a>
    </li>
    <li><a class="button" data-rel="#content-b" href="#">b button</a>
    </li>
  </ul>

  <div class="flr-inner">
    <div class="container" id="content-a">
      AAA
    </div>
    <div class="container" id="content-b">
      BBB
    </div>
  </div>
  <ul>
    <li><a class="button active" data-rel="#content-a" href="#">a button</a>
    </li>
    <li><a class="button" data-rel="#content-b" href="#">b button</a>
    </li>
  </ul>
</div>

Upvotes: 0

Related Questions