Как скрыть и раскрыть элемент по клику?

Question

[xonar]

Здравствуйте.

На сайте есть вот такой блок, хочу приделать к нему кнопку при нажатие на неё чтоб блок скрывался, а при нажатие на кнопку "Открыть", чтоб блок опять раскрывался.



-----------



Сам пытался чёт сложно.

Вот код этого блока.

return (
      <div className="fast-bet">
        <div className="fast-bet__head clearfix">
          <div className="fast-bet__balance">
            {(user.money || 0).toFixed(2)}
          </div>
          <button className="fast-bet__btn-bet" onClick={this.handlePlaceBet}>
            Поставить предметы
          </button>
          <button className="fast-bet__btn-transfer" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "STEAM" })}>
            Перевести
          </button>
          <button className="fast-bet__btn-withdraw" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "STEAM" })}>
            Вывести
          </button>
          <button className="fast-bet__btn-deposit" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "SITE" })}>
            Пополнить
          </button>
          <button className="fast-bet__btn-refresh" onClick={this.refreshInventory}>
            <i className={`fast-bet__refresh-icon fa fa-refresh ${!isLoaded ? "fast-bet__refresh-icon--active" : ""}`.trim()} />
          </button>
          <div className="fast-bet__info-message">
            Ваш внутренний инвентарь
          </div>
        </div>
        <div className="fast-bet__content">
          <Scrollbars
            renderView={props => <div {...props} className="fast-bet__inventory clearfix" />}
            autoHeight
            autoHeightMin={105}
            autoHeightMax={210}
          >
            {inv}
          </Scrollbars>
        </div>
      </div>
    );

Comments

[ой всё]

что вам мешает взять работающий пример и посмотреть как он работает?

Answer 1

[Станислав]

return (
      <button id="fast_bet_1" data-route="hide">Скрыть/Раскрыть</button>
      <div className="fast-bet" data-id="fast_bet_1">
        <div className="fast-bet__head clearfix">
          <div className="fast-bet__balance">
            {(user.money || 0).toFixed(2)}
          </div>
          <button className="fast-bet__btn-bet" onClick={this.handlePlaceBet}>
            Поставить предметы
          </button>
          <button className="fast-bet__btn-transfer" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "STEAM" })}>
            Перевести
          </button>
          <button className="fast-bet__btn-withdraw" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "STEAM" })}>
            Вывести
          </button>
          <button className="fast-bet__btn-deposit" onClick={() => actions.addModal({ type: "INVENTORY", inventoryType: "SITE" })}>
            Пополнить
          </button>
          <button className="fast-bet__btn-refresh" onClick={this.refreshInventory}>
            <i className={`fast-bet__refresh-icon fa fa-refresh ${!isLoaded ? "fast-bet__refresh-icon--active" : ""}`.trim()} />
          </button>
          <div className="fast-bet__info-message">
            Ваш внутренний инвентарь
          </div>
        </div>
        <div className="fast-bet__content">
          <Scrollbars
            renderView={props => <div {...props} className="fast-bet__inventory clearfix" />}
            autoHeight
            autoHeightMin={105}
            autoHeightMax={210}
          >
            {inv}
          </Scrollbars>
        </div>
      </div>
    );

(function() {
    var e = document.querySelectorAll('[data-route="hide"]')
    Array.prototype.forEach.call(e, function(e) {
        e.getAttribute("data-init") || (e.setAttribute("data-init", "true"), e.addEventListener("click", hide))
    })

    function hide(e) {
        var t = document.querySelector('[data-id="'+e.target.id+'"]')
        t.style.display = t.style.display === 'block' && 'hidden' || 'block'
    }
})()

На коленке писал, надо проверять