Добрый день!
Искал, как изменить стандартный эффект toggle, чтобы нужный блок выплывал слева направо.
Гугл подсказывает, что нужно прописать toggle( 'slide' ) или toggle( 'drop' ), но стандартный эффект почему-то не изменяется. Чувствую что где-то туплю.
Полный код ниже (тег script в конце)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
</script>
<style>
.fa-question-circle {
font-size: 1.5em;
right: 10px;
top: 6px;
user-select: none;
}
i.fa-question-circle {
color: #000;
cursor: pointer;
}
i.fa-question-circle .inf-tip {
font-size: 0.85em;
position: absolute;
top: 6px;
left: 40px;
background: white;
border: 1px dashed #000;
padding: 1px 12px 4px;
cursor: auto;
display: none;
}
</style>
</head>
<body>
<i class="far fa-question-circle" id="fa-inf-help"><span class="inf-tip" id ="inf-tip">I should slide from from left to right and back again</span></i>
</body>
<script>
$(document).ready(function () {
$('#fa-inf-help').click(function () {
$("#inf-tip").toggle("drop");
});
});
</script>
</html>
