Hi i have code like this:
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Show more") {
$("#toggle").text("Show less");
$("#text").slideDown();
} else {
$("#toggle").text("Show more");
$("#text").slideUp();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-container">
<button id="toggle">Show more</button>
</div>
In show more i would like to add a icon /f078 and in show less /f106.
How to add? I tried by css and html tags but it doesnt work.
Related
I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.
<img style="width:26px; height: 23px;" class="customTooltip" data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">
You can do it using bootstrap
<b-button id="tooltip-target-1">
Click Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
No need to reinvent the wheel. You can use third party library like TippyJs:
tippy(".item", {
trigger: 'click',
content: `item info`,
allowHTML: true,
animation: 'fade',
onShow(instance) {
let element = instance.reference;
instance.setContent(element.getAttribute('data-info'));
//console.log(instance);
},
});
img {
margin: 2rem
}
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">
My JQuery solution without any other js libs for custom tooltip:
<script>
$(document).ready(function() {
var noHideTooltip = false;
$(document).click(function(e) {
if (!noHideTooltip) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
}
});
$(document).on('click', '.tooltip-box', function(e) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
$(this).addClass('tooltip-box-show');
noHideTooltip = true;
setTimeout(function() { noHideTooltip = false; }, 0);
});
});
</script>
.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" class="tooltip-box"><span class="tooltip-text">Text here..</span
Just add your css tooltip style
Hi I want to create several buttons that change the css how i can do this
and click it again to undo it
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1"></div>
If you want to do it in a proper way then you need to use jquery toggleClass() method like below
$(document).ready(function(){
$("#btn").click(function(){
$(".item-1").toggleClass("red");
});
$("#btn2").click(function(){
$(".item-1").toggleClass("blue");
});
$("#btn3").click(function(){
$(".item-1").toggleClass("green");
});
});
.red
{
color:red;
}
.blue
{
color:blue;
}
.green
{
color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">red</button>
<button id="btn2">blue</button>
<button id="btn3">Green</button>
<br>
<div class="item-1">color</div>
You can use classes for toggle(do-undo) properties.
Css:
.boldText{
font-weight:Bold;
}
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = $('.item-1');
btn.onclick = function(){
txt.toggleClass('boldText')
}
.boldText{
font-weight:Bold;
}
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<button id="btn">bold</button>
<button id="btn2">italic</button>
<button id="btn3">underline</button>
<div class="item-1">test Text</div>
You can also add italic and underline options.
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}
<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}
Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});
I have the following HTML code:
<button>good</button><br>
<button>bad</button><br>
<div class="new" style = "display: none;">booknow</div>
<div class="old">
welcome.
</div>
and the following JavaScript code:
<script>
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
How can I toggle the visibility of the div(s) with class new whenever a button is clicked?
Try below
$(document).ready(function(){
$("button.good").click(function(){
$(".new").toggle();
});
$("button.bad").click(function(){
$(".old").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="good">Good</button><br>
<button class="bad">Bad</button><br>
<div class="new">booknow</div>
<div class="old">welcome.</div>