Как правильно сверстать?

Question

[developerrr]

Как правильно сделать такое:

Выберите: включить / выключить

Нужно, чтобы при нажатии на "включить" отображался div под этой строчкой, а сам текст "включить" менял цвет, при нажатии на "выключить" - div удалялся и цвет текста "включить" "выключить" менялся бы цветами. Как правильно такое сделать, ссылками и по событиям click на элементе вызывать функцию или лучше как-то иначе?

Answer 1

[Николай Шабалин]

html

<a class="on" href="javascript:;">Включить</a>
 <a class="off" href="javascript:;">Выключить</a>
 
 <div class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, molestiae!
 </div>

SASS

.text {
  display: none;
}

.on {
  &.is-active {
    color: green;
  }
}

.off {
  &.is-active {
    color: grey;
  }
}

jQuery

$on = $('.on');
$off = $('.off');
$text = $('.text');
active = 'is-active';

$on.click(function() {
  $text.fadeIn(300);
  $on.addClass(active);
  $off.removeClass(active);
})

$off.click(function() {
  $text.fadeOut(300);
  $on.removeClass(active);
  $off.addClass(active);
})

Поиграться здесь.

Answer 2

[Ivan Demidov]

А такой вариант не подходит ? тыц!

Comments

[Владислав Копылов]

Интересно, где можно подробнее об этом прочитать?

[timtimIT]

Тут пhосто используется инпут type="radio" который скрыт, но реагирует на click на label... то-есть при клике на label инпут становиться checked или наоборот... а уже к checked прописывается стили для контента и цвета label..

[Владислав Копылов]

а что означает знак ~ в css ?

[Ivan Demidov]

htmlbook.ru/css/selector/sibling

[Владислав Копылов]

Ivan Demidov: ааа, спасибо

[developerrr]

Спасибо, то, что нужно. А как быть, если у меня такая структура?

<div>
<div>
<input type="radio" name="switch" id="on" hidden  />
<input type="radio" name="switch" id="off"   hidden />
<label for="on">Включить</label> / <label for="off">Выключить</label>
</div>
<div>some content</div>
</div>
<div><div class="content">content</div></div>

[Николай Шабалин]

developerrr: с помощью css никак т.к. ваш div с текстом должен быть минимум на одном уровне с input.

Answer 3

[Владислав Копылов]

на jquery при событии click() вызывать toggle()