Как изменить статус блока?

Question

[fulli]

Вот сам код
Самое сложно сделал и теперь не знаю как лучше сделать вот такое..


Надо к событиям обращаться? Или можно сделать с помощью css

Comments

[fulli]

Вот пример волнует не техническая часть, а анимация.. как ее можно реализовать в мое скрипте ? или стоит на css ?

Answer 1

[Sergey Romanov]

Вот сделал копию. Если я правильно понял тебе надо поменять текст на кнопке.

jsbin.com/jaceka/1

Но не проще ли вот так?

jsfiddle.net/Serhioromano/wzcaedn8

Просто кусок HTML и ни какого кода вообще не надо писать?

Comments

[fulli]

Да, именно , Спасибо)

[fulli]

Еще 1н вопрос, как к более опытному разработчику, что лучше: реализация подобного на js или на css ? В основном интересует кроссбраузерность.

[Sergey Romanov]

Это реально зависит от многих факторов. Нужно учесть что яваскрипт ест ресурсы компьютера пользователя. Так что если ваш сайт уже загружен, можно и css. Если как проффесионал я бы не выбрал ни одно их этих решений. Без явы это не то а чистая ява это тоже не то. Нужно использовать фреймворки.

[fulli]

@Serhioromano да фрейм он загрузит только, я вот уже написал еще 2 версии уже чисто на css, 1я не много мудренная, 2я уже по чище )

Answer 2

[Сергей Виноградов]

Мм, непонятен вопрос... То что вы нарисовали на картинке, да, можно сделать на html+css. Если нужно чтобы еще и открывалось по клику, то требуется код на js, который вы собственно уже и написали.

Comments

[fulli]

Что бы открывалось по клику на блок, уже сделал(ссылка на код прилеплена на верху). Теперь надо доделать статус события "когда блок не открыт, то справа было написано открыто. Когда тыкаешь на этот блок, он открывается и надпись меняется на закрыть, можно что бы картинка была, не суть. Просто что бы текст менялся. Что-то типо чейксбокса, тыкаешь на него и появляется галочка, еще раз тыкаешь, он исчезает...

[fulli]

ссылка

Answer 3

[Павел Иванников]

Лично я использовал бы jQuery и заготовленные селекторы для скрытия (открытия) этого блока

index.html

...
<div id="block" class="first"></div>
...

script.js

...
var $block = $('#block');

$block.click(function(){
    $block.removeClass('first');
    $block.addClass('second')
});
...

Для замены текста

...
var $label = $('#label');

$block.click(function(){
  $label.text("Открыть")
});

Comments

[fulli]

Это все замечательно, но данный пример уже реализован, код перекреплен сверху, осталось только сделать изменение события.. (открыть/закрыть) Просто что бы текст менялся.. Можно на css нагородить с помощью событий, можно на js.. я не знаю как лучше, в таких ситуация у меня полный мрак.

[fulli]

Вот пример на css, а не как у меня на js. Вот там куча не много странных css выражений , может с помощью них доделать