When the mouse click, I need to hide the link and show another div.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
I just use simple hide method. But how can I show my "hello" div after the link hide?
Since jQuery is used bind the event handler using it instead of ugly inline click handler.
You need to hide() the current element, then Class Selector ('.hello') can be used to display the other div.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide();
$('.hello').show();
})
});
.hello {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
As per current HTML, you can use .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery(function($) {
$('.test').click(function(e) {
e.preventDefault();
$(this).hide().next().show();
})
});
You can use the following code:
$(function() {
$('.test').click(function() {
$('.test').hide();
$('.hello').show();
});
})
.hello {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
Fetch from link
<div class="hello">Hello world</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();">
Fetch from link
</a>
</div>
<div class="hello" style="display: none; ">Hello world</div>
You must move the div outside because you are hiding the div containing your "Hello world" text.
<div class="fetch-from-link">
<a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
Fetch from link
</a>
<div class="hello">Hello world</div>
</div>
You are hiding the whole div containing both the elements. Hide link only.
Related
<div class='selected><div class="test"></div><div class="cancel"></div></div>
I need to hide the div with class selected after the cancel class is clicked. There are many of these, therefore it has to be the previous one.
I tried doing this but it does not work:
$(document).on('click','.cancel',(e)=>{
$(e.currentTarget).prev('.selected').hide()
})
It registers the click but does not hide .selected
Please put the ending class quotation mark <div class='selected> to <div class='selected'> and use the following code because .selected is parent so:
$(".cancel").on("click",function(e){
$(this).closest('.selected').hide();
});
Use closest to get the closest ancestor. Or to get the sibling using prev, update your HTML.
Both will solve your issue, but not sure from question if you want to hide the cancel, or not.
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).prev('.selected').hide()
})
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).closest('.selected').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selected'>
<div class="test">Selected Parent</div>
<div class="cancel">Cancel</div>
</div>
<hr />
<div>
<div class='selected'>
<div class="test">Selected Sibling</div>
</div>
<div class="cancel">Cancel</div>
</div>
This approach will find the sibling, but hide the parent. Seems like what you really want.
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).prev('.selected').parent().hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="test selected">Selected Parent</div>
<div class="cancel">Cancel</div>
</div>
I am trying to show a dropdown when the gear-img div is clicked using jQuery but since it's wrapped inside an a tag, it ends up redirecting me to the url and I also want the whole div clickable. Please suggest a fix or a better way to achieve this.
<a href="http://www.google.com">
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"></div>
</div>
</a>
You could stop propagating the event onto the parent a tag :
$(".gear-img").click( function(event){
//you toggling code here....
event.preventDefault();
event.stopPropagation();
});
Add you clickable behaviour differently for every different-behaving div.
An element that is inline elements should not contain block elements.
Change code like this:
$(document).ready(function(){
$('.gear-img').click(function(){
$('.dropdown').toggle();
})
})
.dropdown {
display: none;
}
img {
width: 50px;
cursor: pointer;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
redirect to google
<div class="content">
<div class="gear-img"><img title="Show dropdown" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
<div class="dropdown">Dropdown</div>
Because just adding an anchor (a link) doesnt make it work as you intend. It now does exactly what you told it to do; When you click it, it goes to Google.
You can drop the anchor add a little jQuery:
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"> A<br/> B<br/> B<br/> </div>
</div>
and then you can use a little code to toggle the list:
$('.content').on('click', '.gear-img', function(){
$(this).find('.dropdown').slideToggle();
})
try this one:
$(function(){
$('.gear-img img').on('click',function(e){
e.stopPropagation()
$('.dropdown ul li').toggle('show');
console.log('Image Clicked!');
});
$('a').on('click',function(e){
e.stopPropagation()
$('.gear-img img').click()
return false;
});
});
.show{
display:block;
}
.dropdown ul li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
Click Here!
<div class="content">
<div class="gear-img"><img src="https://indianflag.co.in/wp-content/uploads/2016/12/2.j"></div>
<div class="dropdown">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</a>
You can just do this.
Initially, keep your dropdown div display none.
On click of that image div, we can show the dropdown div.Please find the code and let me know if you need further help.
<a href="http://www.google.com">
</a>
<div class="content">
<div class="gear-img" onclick="fun()"><img src="images/ic-settings-black-24-px.svg">
</div>
<div id="dropdown" class="dropdown" style="display:none">
</div>
</div>
<script>
function fun()
{
var x=document.getElementById("dropdown");
x.style.display="block";
}
</script>
I have a question, and I doubt it is possible. the question is as follows:
How can my onclick be executed without the anchor tag being activated?
The onclick will show the disclaimer message.
Sample code:
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...."/>
</div>
<div class="disclaimer-message">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
</div>
</div>
</div>
</a>
Thanks in advance :)
I would write a dedicated function to handle your click.
<span onclick="clickHandler">...</span>
See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().
function clickHandler(e) {
e.preventDefault()
e.stopPropagation()
}
This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="alert('hello');return false">try me</span>
</a>
Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>
</a>
To prevent the anchor link being invoked on click event :
Assign the click listener on the highest parent possible (right after anchor tag)
Prevent the event bubbling up to the anchor by invoking its preventDefault method
var container = document.querySelector('#container');
container.addEventListener('click', function(event) {
event.preventDefault();
var msgBlock = container.querySelector('.disclaimer-message');
msgBlock.classList.toggle('disclaimer-show');
msgBlock.classList.toggle('hide');
});
a {
text-decoration: none;
}
.disclaimer-show {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...." />
</div>
<div class="disclaimer-message hide">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span>?</span>
</div>
</div>
</div>
</a>
<a href="websiteurl.com">
<p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>
Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor
I have a link that when clicked, will reveal a div below it. The div is hidden by default.
Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.
The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.
Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.
How can I get around this? Here is my code -
$('.outer-toggler').click(function() {
$(this).parent().find('.outer-data').toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).parent().find('.inner-data').toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements
Use $(this).next().toggle(); as the toggle target is the next sibling
$('.outer-toggler').click(function() {
$(this).next().toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).next().toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I would like to be able to click on a link and for it to show the div section, is there an easy jQuery solution?
e.g. click on one will show div-one, and hide div-two & div-three, click two will show div-two and hide div-one and div-three
<div class="div-one" >
one
</div>
<div class="div-two" style="display: none">
two
</div>
<div class="div-three" style="display: none">
three
</div>
one
two
three
If your anchor only has one class then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).prop('class');
$('.div-'+cls).show().siblings('div').hide();
});
Fiddle Demo
or give your anchor a data attribute:
one
two
three
then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).attr('data-target');
$('.'+cls).show().siblings('div').hide();
});
Fiddle Demo
try this
one
two
three
<script>
function show_div(el){
$('.div-'+el.className).toggle(); // toggle could be replaced with show()/hide()
}
</script>
Check Live jsFiddle
HTML
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Menu1</div>
<div id="div2" class="targetDiv">Menu2</div>
<div id="div3" class="targetDiv">Menu3</div>
<div id="div4" class="targetDiv">Menu4</div>
JQuery
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
You can achieve your goal easily using jQuery. Please find the way to do this below -
jQuery("a").click(function() {
jQuery("div").hide();
if(this.className == 'one')
jQuery(".div-one").show();
if(this.className == 'two')
jQuery(".div-two").show();
if(this.className == 'three')
jQuery(".div-three").show();
});
Try Demo -
http://jsfiddle.net/yrM3H/1356/
You can use show() and hide() functions in jquery to achive this.
$(".div_name").hide(); // to hide div
$(".div_name").show(); // to show div
You can use css class for this:
I have used same class for anchor and corresponding div. I have used 2 css classes(hide and show).
when some click in the anchor tag:
-- i have removed show class of previous div and added hide class.
-- i have added show class and removed hide of corresponding div by class name.
HTML:
<div class="div-one show" >
one
</div>
<div class="div-two hide" style="display: none" >
two
</div>
<div class="div-three hide" style="display: none">
three
</div>
one
two
three
JQUERY:
$(document).ready(function(){
$("a[class^='div-']").click(function(e){
e.preventDefault();
strClass= $(this).attr('class');
$(".show").removeClass("show").addClass("hide");
$("div."+strClass).removeClass("hide").addClass("show");
})
});
jsFiddle