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>
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
I have a .net form with multiple div sections. I have a button which toggles the visibility for each of them. Currently I have only managed to get it working with one block of jquery for each btn/div.
Could I please get some assistance in making a single jquery code block that can be reused for n div sections?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSection1").click(function () {
if ($(this).val() == "Show") {
$("#Section1").show();
$(this).val("Hide");
} else {
$("#Section1").hide();
$(this).val("Show");
}
});
</script>
<input id="btnSection1" value="Show" runat="server" type="button" name="btnSection1"/>
<div id="Section1" style="display: none;">
Section 1 text
</div>
Any advice in converting the jquery from using val to text so as to use asp:Button rather than <input' type="button" />? The following does not work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSection1").click(function () {
if ($(this).text() == "Show") {
$("#Section1").show();
$(this).text("Hide");
} else {
$("#Section1").hide();
$(this).text("Show");
}
});
</script>
<asp:Button ID="btnSection1" runat="server" Text="Show" name="btnSection1"/>
<div id="Section1" style="display: none;">
Section 1 text
</div>
Cheers in Advance.
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.
I want to show a block 5 seconds after clicking the button. My current code doesn't work. What's the problem?
if ($('#identify').click(function() {
setTimeout(function() {
document.getElementById('block1').classList.remove('hide');
}, 5000);
}));
.hide {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary" style="padding: 10px;">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>
Event handlers in JS don't work as you're expecting; ie. by checking state in if conditions.
Instead you should attach event handler functions to the elements which will run when the specific event occurs. This is how your code should be structured:
jQuery($ => {
$('#identify').on('click', function() {
setTimeout(function() {
$('#block1').removeClass('hide');
}, 5000);
});
});
.hide { display: none; }
#identify { padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>
Note the inclusion of a document.ready handler in the above code, and also moving the inline CSS in to the stylesheet.
Try this code:
$(document).ready(function(){
$('#identify').click(function() {
setTimeout(function(){
document.getElementById('block1').classList.remove('hide');
}, 5000);
});
});
Below code will show taht div immediate and then it hide the text and then it reappers after 5 sec as in your question.
<script>
$('#identify').click(function() {
$("#block1").removeClass('hide');
setTimeout(function(){
$("#block1").addClass('hide');
}, 1000);
setTimeout(function(){
$("#block1").removeClass('hide');
}, 6000);
});
</script>
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>