I would like it so when I click on a Bootstrap Glyphicon a div is displayed.
I currently have this HTML (simplified):
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
Then this JS:
$('#headerdisplaybuttonsxs').click(function()) {
$('#headerrightside').css("display", "block");
});
So I would basically like #headerrightside to display on the clicking of #headerdisplaybuttonsxs. Problem is I can't get that to work.
#headerdisplaybuttonsxs Has a CSS property of display:none.
I have tried $('#headerrightside').show() but that does not seem to work. How could I get this to work? Thank You!!
There was a typo on the click event function with an extra ).
$('#headerdisplaybuttonsxs').click(function() {
$('#headerrightside').css("display", "block");
});
#headerrightside {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
Related
Forgive me for asking this question but I have been pulling my hair trying to fix this but I cannot understand where I am messing up. I have checked many answers on SO which recommend using attr or props in Jquery which did not work for me so I think I might be making some other problem.
I have ruby code where I have an icon. When I click on this icon, I want to show/hide another div.
My ROR code:
<div class="choice <%= 'active' if listing.payment_term_shortterm == 'on' %>" data-toggle="wizard-checkbox">
<%= form.check_box :payment_term_shortterm, id: "payment_term_shortterm_test" %>
<div class="card card-checkboxes card-hover-effect">
<i class="ti-home"></i>
<p>Small Time</p>
</div>
</div>
This above thing creates this icon in my website as follows:
I just want that if Small Time is clicked it shows another div. My Jquery so far:
$(function () {
$("#payment_term_shortterm_test").click(function () {
if ($(this).is(":checked")) {
$("#SmallTimeShow").show();
} else {
$("#SmallTimeShow").hide();
}
});
});
And this jquery is supposed to show following div:
<div id="SmallTimeShow" style="display: none;">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<p> Hi Loan for Small time.</p>
</div>
</div>
</div>
</div>
I have tried many things, such as using props or attr in jquery but it also did not work.
EDIT
THis is what appears in the browser inspect element:
You can try with display 'block' and display 'none' as I mentioned below:
$('#payment_term_shortterm_test').change(function() {
if($(this).is(":checked")) {
$("#SmallTimeShow").css('display','block');
}
else{
$("#SmallTimeShow").css('display','none');
}
});
I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.
I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>
I'm having a few tooltips on an image. I want to slide open a div (with text) if a tooltip is clicked. This is working fine using the code below.
The part I can't figure out: I also want to close any open "tooltip_content" if I press any of the tooltips.
I did build this before (with display/hide) but am out of ideas how to do it using a slide-effect.
<div class="tooltip">
<div class="inner"></div>
<div class="tooltip_content">Text</div>
</div>
$(".tooltip .inner").click(function(){
$(this).next().slideToggle();
});
You can add one more line :
$(".tooltip .inner").click(function() {
$('.tooltip_content:visible').not($(this).next()).slideUp();
$(this).next().slideToggle();
});
.tooltip_content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip">
<div class="inner">inner1</div>
<div class="tooltip_content">Text1</div>
</div>
<div class="tooltip">
<div class="inner">inner2</div>
<div class="tooltip_content">Text2</div>
</div>
<div class="tooltip">
<div class="inner">inner3</div>
<div class="tooltip_content">Text3</div>
</div>
The jQuery object $('.tooltip_content:visible') will look for the visible tooltip_content div and if it finds one or more, it will slide them up but excluding the current objects next item with .not($(this).next()).
$(".tooltip_content").click(function(){
$('.tooltip_content:visible').slideToggle();
});
use this code will make your effect.
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
Right, when I hover over the class .col-lg-6 I want the div with class of .navText to hide.
HTML:
<div class="row">
<div class="col-lg-6">
<a class="homeNav col-lg-12" href="index.html">
<div class="glyphicon glyphicon-home pull-left"></div>
<div class="navText">Home</div>
</a>
</div>
<div class="col-lg-6">
<a class="aboutNav col-lg-12" href="about.html">
<div class="glyphicon glyphicon-home pull-left"></div>
<div class="navText">About Me</div>
</a>
</div>
</div>
JQUERY:
$('.col-lg-6').hover(function () {
$(this).children('.navText').hide();
});
This isn't working.
However if I just put:
$('.navText').hide();
It does work so why isn't my hover function working correctly. I'm a little confused as I'm 100% sure I have written to jquery correct. Could bootstrap be effecting this?
Also if I use the jquery code.
$('.col-lg-6').hover(function () {
$('.navText').hide();
});
It will hide all the .navText classes.
So its having a problem with $(this) I think
.navText is not a child of .col-lg-6. It is a child of it's child. So your jQuery function would not work. Why not use css here?
.col-lg-6:hover .navText {
display: none;
}
As KJ has pointed out .navText is not a child, css is the best approach however you can also use .find() which will traverse all lower elements.
$(this).find('.navText').hide();
.navText is not a direct child of .col-lg-6. Use find instead:
$('.col-lg-6').hover(function () {
$(this).find('.navText').hide();
});