Vikhrmodels/habr_qa_sbs huggingface dataset:
Вопрос: Почему не работает style="background:brack" в оформлении вопроса «Детали вопроса» на toster.ru?

Лучший ответ:
Ха, конечно это запрещено. И не только из соображений безопасности, а еще и потому, что тостер имеет свой дизайн и свое видение на то, как должны оформляться примеры кода.
Вот в своей домашней IDE вы можете сделать фон серо-буро-малиновым в крапинку, а цвет кода кислотно зелёным и считать что лучше ничего нет. Но делайте это дома пожалуйста.

Худший ответ:
скорее всего, исходя из общей стилистики и цветовой схемы сайта.
Вопрос: Как сообщить Google о серьезных недостатках в интерфейсах проектов компании?

Лучший ответ:
Интерфейсных у них куча недостатков. Но они могут не считать это недостатками.

Худший ответ:
Со страницы сервиса фидбек можно отправить, либо координаты для связи с тех. поддержкой  поискать на странице. Если недостатки не из области безопасности, то можете и на хабре про них написать. Русскоязычные сотрудники гугла наверняка его читают.
Вопрос: Многопоточный запуск приложения с выводом?

Лучший ответ:
Можно перенаправить вывод дочерних процессов в отдельный пайп или файл, используя subprocess.Popen.
Тут документация по этому модулю: docs.python.org/library/subprocess.html
Тут можно посмотреть пример: stackoverflow.com/questions/9283770/logging-process-stdin-and-stdout

Худший ответ:
А можно складывать в queue результаты и потом оттуда забрать по окончании
Вопрос: Ubuntu 14.04. Как ограничить перемещение пользователя ssh его домашним каталогом, а лучше не домашним а другим?

Лучший ответ:
В sshd_config:Match User someuser
    ChrootDirectory /some/directory
Так же, в "man sshd_config" сказано: The ChrootDirectory must contain the necessary files and  directories  to  support the user's session.  For an interactive session this requires at least a shell, typically sh(1), and  basic /dev  nodes  such  as  null(4),  zero(4),  stdin(4),  stdout(4), stderr(4), and tty(4) devices.  For file transfer sessions using ``sftp'', no additional configuration of the environment is necessary if the in-process sftp server is  used,  though  sessions which  use logging may require /dev/log inside the chroot directory on some operating systems (see sftp-server(8) for details).

Худший ответ:
ssh chroot вас спасет.
Вопрос: Выбрать фреймворк для разработки социальной сети?

Лучший ответ:
Хостинг ElasticWeb, там есть готовые конфигурации по laravel, ничего настраивать не нужно. Оплата хостинга за потребляемые ресурсы, уверен, что это будет выгодно в первое время существования проекта.

Худший ответ:
Ну смотрите самые популярные Laravel, Yii, Symfony
Можете выбирать любой, поищите информацию чем отличаются они друг от друга и выберите нужный, подойдет любой
Вопрос: Замена многочисленных ярлыков одним лаунчером?

Лучший ответ:
TurboLaunch например. А вариант скинуть все ярлыки в одну папку и запускать оттуда не рассматривается?

Худший ответ:
Если пользуетесь Total Commander, то можно в нем создать пользовательскую панель и на ней создать соотв. кнопки, между группами поставить разделители.
Вопрос: Как «взорвать» изображение?

Лучший ответ:
Этот плагин что угодно так взорвет, вставьте туда фоновое изображение и все сработает.

Худший ответ:
jsfiddle.net/py37v40v/1 чуть поправил, оно стало?
Вопрос: Какой банк выбрать для хранения денег?

Лучший ответ:
Недостаточный список требований.
По нему можно тыкнуть в альфу. Денег на содержание потратите, но в плюсах нормальный ИБ, много банкоматов, много откуда туда работает вывод, и даже закинув деньги на киви сможете потом из киви кошелька скинуть на альфу. В отличии от втб24 например не надо бегать за картами одноразовых кодов.
С другой стороны можно тыкнуть в выгодный тиньков, на остаток по карте в пределах 200к — 10% годовых раз в месяц, вклады в год выгоднее 15% по «лесенкам», бесплатное обслуживание при прочих равных, бесплатный вывод с киви на него до 60к в месяц. 
Или остановиться на чем-то среднем — русский стандарт. Бесплатная обслуга по любому, 10% годовых раз в месяц на остаток по карте при тратах всего 10к рублей. Банкоматов там сям достаточно.

К сожалению, во всех банках Вы наткнетесь на 2 грабли
1) Снять все 2кк разом не сможете культурно, везде наткнетесь на что-нибудь. В русском на комиссии выше 100к, в альфе и ткс на ограничения по сумме снятия в сутки/месяц.
2) Не забывайте про АСВ. Оно 700к только покрывает.

Худший ответ:
С точки зрения бюрократии «с кем-то разговаривать, что-то заполнять» лучше всего таки Альфа. Ничего кроме подписи от вас в большинстве случаев не потребуется. 
В отличие от Юникреда, например — простыня из квадратиков, которые нужно заполнять печатными буквами, на любой чих.
Вопрос: Что изучать, чтобы иметь на кусок хлеба в ближайшем будущем?

Лучший ответ:
Свободная касса.

Худший ответ:
Нужно вести подсчет сколько таких вопросов появляется в день, достали уже, простите. Никогда не задавался подобными вопросами.
Вопрос: Требуется помощь в покупке Android-устройства

Лучший ответ:
Цены советую смотреть по price.ru:
price.ru/model-offers/131404?auto=1&query=HTC+Desire+Z

Худший ответ:
Присмотритесь к Motorola Defy — правда его придется все таки заказывать, но есть у него «изюминка»-пылавлагозащищенность + новые партии идут без брака динамика и сразу с Андроидом2. Соглашусь, что предварительно лучше всего спец ресурсы посетить, те же 4pda или motofan. Я бы лично выбирал из Desire, XT720, Defy — но последний уж больно нравится
Вопрос: Подход или реализацию для валидации форм?

Лучший ответ:
Вы вообще представляете, какую головную боль вы хотите доставить пользователю подобной формой?
необязательного поля, но, если оно заполнено, то оно должно соответствовать определённому условию,
нескольких необязательных полей, но хотя бы одно из них должно быть заполнено,
нескольких необязательных полей, но, если заполнено одно из них, то должны быть заполнены и остальные?
Как вы хотите объяснить заполняющему форму соответствие того, что вводить нужно, а что не нужно? Даже если вы и сможете это сделать, то все равно большинство людей будет мягко говоря в замешательстве. В формах не нужна такая «гибкость», все должно быть просто и очевидно. Объединяйте поля, модернизируйте форму для максимальной простоты.

Худший ответ:
Взгляните на реализацию валидатора в фреймворке Kohana 3 — считаю его хорошим примером. Реализовать проверку при условии заполненности определенных полей можно с помощью колбэков, если я верно понял, о чем речь.
Вопрос: Google App Engine: облачная IDE для Python?

Лучший ответ:
GAE не "облачная IDE для Python". GAE - сервис хостинга сайтов и web-приложений. Поддерживается python 2.7 и довольно старая версия django. Для хранения данных есть Cloud SQL и NDB. И то, и другое  можно аттачить к джанге.
Для локальных разработки и дебага отлично подходит PyCharm + GAE SDK.
Кроме того, не следует забывать, что у GAE есть квоты на трафик. Подумайте, подойдет ли он Вам, или, может быть следует подыскать другой PaaS/VPS-хостинг.

Худший ответ:
Heroku попробуйте
Вопрос: Как узнать обработчики событий на элементе?

Лучший ответ:
В Chrome Dev Tools выделите нужный вам элемент и перейдите на вкладку Event Listeners (сайдбар во вкладке Elements).

Худший ответ:
В FireBug есть вкладка «События», где отображается список всех связанных с выбранным элементом обработчиков.
Вопрос: Как передать атрибут при нажатии кнопки?

Лучший ответ:
Способ 1.
Каждую строку делаете формой добавляя скрытое поле с номером строки<input type='hidden' name='row' value='{$row}' />
Способ 2.
Каждую кнопку делаете с обработчиком нажатия <input type='button' onclick='javascript:sendData("{$row}");' value='Добавить' />В функцию sendData передаётся номер строки, по нему выбираете из таблицы поле ввода, получаете значение и передаёте на сервер.
Способ 3.
Каждую кнопку делаете с обработчиком нажатия <input type='button' onclick='javascript:sendData(this);' value='Добавить' />В функцию sendData передаётся DOM-элемент кнопки, через .parentNode добираетесь до <tr>, затем от него через .childNodes выбираете из первой ячейки номер строки, из поля ввода значение и передаёте на сервер.

Худший ответ:
<button name='ROW_NUBMER' value="{$row_number}">Добавить<button>
Вопрос: Чем отличается синхронный сервер от асинхронного сервера в boost?

Лучший ответ:
Сразу оговорюсь, могу ошибаться, я boost asio не использовал
С синхронным всё верно. При этом клиенты обрабатываются по очереди.
С асинхронным иначе.
1. В конструкторе tcp_server зовётся start_accept, который зовёт async_accept и возвращается управление обратно.
2. Затем зовется io_service.run(), судя по всему, где-то внутри он-таки принимает подключение и вызывает handle_accept, который был забинжен при start_accept и пункта 1.
3. handle_accept зовёт start, который зовёт async_write, т.е. не дожидается отправки данных, а опять же сразу возвращает управление. По окончании отправки вызовется handle_write
4. затем снова start_accept -> async_accept и возврат
Т.е. в синхронном случае второй клиент не подключится, пока первому полностью не ответят
В асинхронном случае вызывается async_write, и до окончания ответа первому клиенту, в принципе может уже подключиться второй.
Вообще асинхронный способ для того и нужен, чтобы, приняв соединение клиента, сразу начинать принимать следующего, а с первым клиентом работать уже отдельно.

Худший ответ:
в чем качественное отличие асинхронного сервера от синхронного? Насколько я понимаю, принципиальная разница в том кто занимается перекачкой данных, ядро ОС или ваше приложение. В асинхронном (неблокирующем) режиме вы просите ОС вызвать некоторые код по наступлении определённых событий, например когда присоединился новый клиент, когда данные от клиента получены или отправлены клиенту и т.п.подскажите ресурс, где объясняется для простых смертных Не являюсь профи в данном вопросе, для себя разбирался по оф. документации. Так же могу порекомендовать парочку видео уроков от mail.ru:раз - обзор сокетов, синхронный, асинхронный режим, небольшой обзор api различных ОС два - обзор библиотек libevent, boost::asio и т.п.
Вопрос: Почему кириллица отображается неправильно в интерфейсе?

Лучший ответ:
Не надо так:ui->userList->addItem(tr("Стандартный пользователь"));
ui->userList->addItem(trUtf8("Стандартный пользователь"));
tr и trUtf8, обычно используются для локализации приложения, пишите на английском, потом подключайте "перевод" и Qt сам все подставит.
Попробуйте добавить итемы в комбобокс в конструкторе форм.

Худший ответ:
Потому что Qt ожидает юникодные строки.
QTextCodec *codec = QTextCodec::codecForName("Windows-1251");
ui->userList->addItem(codec->toUnicode("Стандартный пользователь"));
Попробуйте такой код, должен сработать.
Вопрос: Автоматическое форматирование отступов в ассоциативных массивах в PHPStorm

Лучший ответ:
PHPStorm 7
Preferences (или Settings) > Секция Project Settings > Пункт Code Style > Подпункт PHP > Вкладка Other > Чекбокс Align key-value pairs

Худший ответ:
Может стоим полазать в "Settings->Code Style->PHP"?
Вопрос: Пойдет такая книга и железка для начинающего говнокодера?

Лучший ответ:
Да, такая книга пойдет. Даже очень.

Худший ответ:
на нетбуке код вводить неудобно будет
Вопрос: DIY: Статья о замене экрана для электронной книги PocketBook 301. Нужна?

Лучший ответ:
А мне кажется Ваш опыт может быть полезен, необязательно именно с данной книжкой, сейчас они набирают популярность, поэтому количество людей, которые могут с этим столкнуться увеличивается.

Разместить можно: DIY или Сделай Сам или Железо.

А можно выбрать что-то другое.

Худший ответ:
Блин, мне нужна 
Дома валяется PB 301 как раз со сломанным экран.

При замене экрана нужны навыки пайки?
Вопрос: Организация правильного зеркалирывания доменов?

Лучший ответ:
DNS записи ссылаются на один и тот же хост.
Apache ServerAlias

Худший ответ:
В общем в итоге я так и не победил эту ситуацию.
Оч много глюков всплывает с применением модов для вордпрес.
Потому отказался от этой затеи увы и все сделал как «у людей», то есть один основной домен, а остальные алиасы…
Вопрос: Поиск похожих по тегам постов в блоге на Yii?

Лучший ответ:
Я бы создал копию базы с изменениями и теги перевел бы в нормальную many-to-many, и уже от сюда плясал

Худший ответ:
Попробуйте FULLTEXT индекс.
Вопрос: Jelastic на reg.ru как по работе?

Лучший ответ:
Такое ощущение, что ответы тут проплаченные.
Правда матка такова, что с облаком на рег.ру лучше не связываться. Выше товарищ написал, что работает стабильно. Если под этим понимать, что стабильно каждые 3 дня я не могу залогинеться с свой же аккаунт как через морду, так и по ssh - то да. Ничего стабильнее в принципе быть не может.
Техподдержка (да простят меня высшие силы, ибо сам когда-то был в техподдержке. Накипело.) - полные идиоты. Ребят, если вы это читаете, то да. Я вам в лицо говорю. Вы - конченые идиоты. Занимайтесь в жизни чем-нибудь другим.
Жалею, что их выбрал. Сегодня же переехал бы на infobox, но ещё неизвестно что там творится. + тонны настроек переносить и установок. Просто нет на это времени. Поэтому придётся жить с тем, что есть.
К слову о самой платформе jelastic - она правда крутая.

Худший ответ:
@denissov 
вот есть дока по интересующему Вас вопросу насчет подвязки доменов
docs.jelastic.com/custom-domains
а вот одна из статей по кластеризации
habrahabr.ru/company/jelastic/blog/217213
Если что - в документации есть и другие статьи (например вот docs.jelastic.com/ru/cluster-in-cloud)
Вопрос: Https, надо ли?

Лучший ответ:
Для форумов/порталов https это правило хорошего тона и заботы о посетителях. Для статических сайтов можно и обойтись.
Купить можно на https://www.isplicense.ru/services/ssl-sert/ , мы гарантируем самые низкие цены на SSL сертификаты и предлагаем бесплатную установку на сайт.

Худший ответ:
Это Вам решать, надо или нет. =)
Вопрос: Возможна ли разработка android приложений на Mac OS?

Лучший ответ:
сам перешел на на Мак с винды. раньше для иос в маке разрабатывал, для андроида на винде. Теперь все на одной машине.
Советую вместо эклипса - Андроид Студию.
Эмулятор советую взять от www.genymotion.com - в разы быстрее и адекватнее чем нативные.

Худший ответ:
У меня Mac mini и установлена Android Studio, но когда я пытаюсь подключать девайсы и отлаживать - студия их просто не видит, причем первый виснет намертво и включается только после перезагрузки. В чем моя проблема?
Вопрос: Наушники для повседневки

Лучший ответ:
Senhreiser HD280. В этой ценовой категории лучше ничего не найдете.

Худший ответ:
Я с 2007 года пользуюсь Grado SR 60.

Из минусов — амбушюры из поролона изнашиваются и их надо время от времени менять.

Из плюсов — очень качественное звучание.
Вопрос: OSX Почему свернутое приложение работает медленно?

Лучший ответ:
поднимите ему приоритет. nice / renice

Худший ответ:
Гуглить AppNap
Вопрос: Какую CMS выбрать для портала?

Лучший ответ:
Вы не поверите, но тут  все есть
Я уже писал по этому поводу Какую использовать CMS для сайта продаж автомобилей?

Худший ответ:
Выбор зависит от того, что для вас первично - быстро создать портал и опробовать на практике свои идеи или серьезно заняться "набиванием руки", а портал - штука вторичная.
Если выбираете вариант 1, то лучше взять что-то более-менее готовое и хорошо расширяемое. Например, altocms.ru - много чего есть готового "из коробки". Чего не хватает - легко расширяется своими плагинами. Зато получите возможность быстро понять, нужен ли ваш портал юзерам, и если нужен, то в каком направлении его развивать. И на чем руку набить тоже будет - не бывает идеальных CMS, где есть все и так, как тебе нужно и хочется.
Если же главное - попрактиковаться, изучить и понять последние тенденции и попробовать применить их на практике и т.д., и т.п., то лучше всего брать фреймворк. Напр., yii2 или Laravel. Если опыта работы с фреймворками нет, то не факт, что доведете свой проект до конца, но при должном упорстве и наличии времени можно неплохо прокачаться.
Вопрос: Deploy на несколько серверов php кода?

Лучший ответ:
capistrano, fabric, phing, etc... Все они по сути лишь обертка для исполнения команд на удаленной машине. Для деплоя и отката действий нужно написать самостоятельный набор команд.
В большинстве случаев схема деплоя работает следующим образом:
Создается слепок текущего репозитория.
Загружается на удаленный сервер в папку /var/www/mysite/deploy_2015_01_01_00:00:01
Сам вебсервер при этом смотрит на симлинк типа /var/ww/mysite/current
Если все прошло удачно, то симлинк переносится на только что созданную папку.
Процесс отката такойже только наоборт, смотрим какие есть папки деплоев и переносим симлинк на предпоследнюю.

Худший ответ:
На нескольких можно, только не знаю как.И откатить git он тоже может.Нужно лазать в док-ции.
Вопрос: Какие два простых framework-а на python и на php (с низким порогом вхождения) можете посоветовать?

Лучший ответ:
https://flask-russian-docs.readthedocs.org/ru/late...
впрочем, и Django  для простых задач не сильно сложнее

Худший ответ:
Зачем вам низкий порог вхождения? В нем и денег будет столько же, и демпинг и конкуренция. 
Почему стало модно входить в низкий порог? 
Почему никто не хочет к звездам :(
Вопрос: И снова о short_open_tag: переписывать код или нет?

Лучший ответ:
Ничем не чревато, учитывая огромное наследство, эти теги версии до 20-ой не выпилят. Это с одной стороны.
С другой, всё же современные стандарты, как уже указали, их использование запрещают, поэтому лучше следовать правилу бойскаута и постепенно подчищать. Уверен, опять же, что есть инструменты, которые сделают это автоматически.

Худший ответ:
Не стоит игра свеч.
Вопрос: Как преобразовать число 568be27e005bd6b61a8b4567?

Лучший ответ:
ваша строка - число в 16-ти ричной системе счисления. Переводим в систему счисления с более высоким основанием (64 например) и радуемся.

Худший ответ:
Как вам пишут в комментариях, скорее всего, это зашифрованный набор символов (пароль, ещё что-то). MD5 нельзя расшифровать средствами PHP, да и вообще, насколько я знаю, можно только использовать rainbow таблицы (уже сгенерированные хеши).
Вопрос: Как начать использовать Kotlin для WEB?

Лучший ответ:
Если хочешь использовать only kotlin в своем проекте то попробуй:Ktor web frameworkExposed - обертка над jdbc (SQL)
Фреймворки достаточно простые, Ktor имеет очень хорошую документацию:
ktor.io
Exposed пока не особо документирован но есть все необходимое для начала: https://github.com/JetBrains/Exposed
Деплоить можно бесплатно на heroku
А если хочется писать и front end на kotlin то можно использовать обертку над React'ом.
Или что то по проще: уested (не совсем обсуждаемый но мне нравится :) )
Думаю я примерно показал вам стек Kotlin, дальше сами )

Худший ответ:
Начните с изучения создания WEB приложений на Java.
Вопрос: Кому вообще нужны кластеры?

Лучший ответ:
Предлагайте техническим вузам.

Худший ответ:
Из более менее широкого сектора, если будет дешево то можно ориентироваться на рендеринг сложных картинок и 3д видео.
Вопрос: Как поменять стили у заполненой формы?

Лучший ответ:
Если можно использовать JS, то в чём вопрос? :)
На JS проверяем поле. Если заполнено, меняем или добавляем стиль. Иначе - оставляем пропускаем поле

Худший ответ:
$('input').keyup(function(event) {
  var value = $(this).val();
  if (value) {
    $(this).addClass('classname');
  } else{
    $(this).removeClass('classname');
  }
});
впишите вместо classname - нужный css класс
Вопрос: Проектирование веб-программы, правильно ли я сделал?

Лучший ответ:
AbstractTask нужен только для DRY. В вашем случае он пока лишний, чуть что добавите позже. Даже больше, можно пока даже интерфейс отдельно не делать. Если в будущем нам понадобится добавить еще одну реализацию скажем... Task-а или TaskManager-а, выделение инетфейса класса вам сделает любая нормальная IDE. Назовете этот интерфейс TaskManager и будет у вас реализация оного ScheduledTaskManager и DBTaskManager... для примера. А клиентский код такие штуки не затронет вовсе.
Советую вооружиться PhpSpec и таким образом проверять насколько удобно вы спроектировали API ваших сервисов.

Худший ответ:
Или унаследоваться от абстрактного класса лишнее, пока нет потребности в создание других менеджеров и иных методов класса Task?
Нужно ли делать для всех классов интерфейсы, если в будущем есть вероятность его расширения?
Вопрос: Нубский вопрос: замена HDD Macbook Pro и установка Mac OS?

Лучший ответ:
1. да
2. нет
3. да (тока нужен диск/флешка с осью, т.к. рекавери раздела — ясное дело на новом харде не будет)

если есть какой-нить шнурок Sata->USB, можно поменять хард, старый подключить по USB, загрузится с диска/флешки и склонировать существующий хард, тогда не придётся ничего переустанавливать и настраивать

Худший ответ:
Ставим новый HDD и/или SSD и при включении нажимаем cmd + R.
Вопрос: Как регуляркой на JS вытащить определённый текст с открытой страницы?

Лучший ответ:
даже без jQueryvar text = document.querySelector(".user-panel__user-name").innerText;

Худший ответ:
Может я немного не понял вопроса, но почему нельзя через jQuery просто сделать так:$('.user-panel__user-name').text();
Вопрос: Чем io.js лучше Node.js?

Лучший ответ:
IO.js пока что совместим с большинством node.js пакетов. 
Отличается он тем что некоторым людям в node.js надоело медленное развитие (переход к новым версиям V8 и.т.д) 
Они стараются быстрее реагировать на изменения в V8.
Сейчас наверно не стоит, проект еще в стадии формирования экосистемы, но двигаются семимильными шагами!

Худший ответ:
по мелочи: в ноде есть проблемы протечки памяти, потребления памяти в iojs лишается/лишена этих проблем, исправляют  очень быстро. 
Работать без флагов с ES6 - кайф. 
зы: Столкнулся в реальном проекте.
Вопрос: Как реализовать поиск по населенным пунктам?

Лучший ответ:
О_о . А YandexMapsAPI и GoogleMapsAPI ?

Худший ответ:
Для поиска кого? 
Пропавших кошечек? Проституток?
Вопрос: Зачем нужны деревья выражений?

Лучший ответ:
Начинающему углубляться точно не нужно. Ознакомится что это такое и попробовать понять всегда хорошо.
Используются самой средой для построения LINQ выражений. На практике для построения лямбда-выражений. Вот  неплохая статья на эту тему.

Худший ответ:
Начинающему программисту в какой области? Если веб, то думаю не стоит сильно углубляться, по крайней мере это будет не срочно. А вот если область пересекается с трансляцией, например, из того же Linq во что-то другое, например, в SQL запрос, то думаю стоит ознакомиться.
Вопрос: Как в Slim Framework реализовать роут вида /method?par1=val1&...&parn=valn?

Лучший ответ:
В объявлении глобальной $app нет ничего странного и страшного, насколько я в курсе. Другого метода до нее добраться все равно нет. 

Если у вас свежий PHP, то можно делать еще как-то так

$app->get('/method', function() use ($app) {
    $app->request->params('par1');
});


Что касается Content-Type, то это решается через $app->response и это тоже нормально.

Худший ответ:
к $app можно добраться и так:
$app = \Slim\Slim::getInstance();
docs.slimframework.com/#Application-Names-and-Scopes
Вопрос: Альтернатива far менеджеру

Лучший ответ:
попробуйте WinSCP. Пользуюсь уже больше года. по сравнению с totalcomander, far никаких нареканий нет. + поддерживает sftp. Интерфейс в принципе аналогичен фар-у

Худший ответ:
Кстати, не хочу никого обидеть, но у меня такое произошло после посещения Одноклассников через IE.
Именно из FAR. Добавил Javascript ко всем html и php на сайтах. Даже Google забанил.
Вопрос: Как добавить класс при клике, а потом удалить при клике за пределами открывшегося блока?

Лучший ответ:
Простейший дропдаун codepen.io/Zoxon/pen/YwpLpK

Худший ответ:
При любом клике проверяем, был ли он внутри вашего разворачиваемого элемента или нет.
А плавность можно добавить за счет css свойства transition, например.
https://jsfiddle.net/azvt2fvu/