Toggle the nearest content when click on anchor using jQuery - javascript

I have a content structure like this:
Click me.
<p class="hidden_content">This content is toggleable.</p>
Click me.
<p class="hidden_content">This is a different section.</p>
Click me.
<p class="hidden_content">This section is also different.</p>
I have already discovered how to make this work with one section, but how can I make it so that when I click on a toggle_button it opens only the nearest hidden_content class.

$('a.toggle_button').click(function() {
$(this).next('p.hidden_content').toggle();
}
http://api.jquery.com/next/

Simply try
$("a").click( function(){
$(this).next('p').toggle();
});
Working Demo

It's easy with JavaScript but you could also stay with plain CSS with the :target selector --
Click me.
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>
<style>
.hidden_content{
display:none;
}
.hidden_content:target{
display:block;
}
</style>
Here's a Fiddle

This will toggle the following div, and stop the page returning to the top:
$('a.toggle_button').click(function(e) {
e.preventDefault();
$(this).next('p.hidden_content').toggle();
}

Use the jQuery .next() selector
$(".toggle_button").on("click", function () {
$(this).next(".hidden_content").toggle();
});

Related

how to make html anchor tag not click able with jquery?

I have html like this
(note -: I included j library on the top of page )
<div class="WIWC_T1">
Level of Course
</div>
to make it not clickable i used jquery like this
$(".WIWC_T1 a").click(function(){
return false ;
});
i tried this too
$(".WIWC_T1 a").off("click");
but onClick="call_levelofcourse();popup('popUpDiv1')" is still working on my page . what is soltuion to do it in very simple way ??
Another aproach (which not uses jQuery) is to use css class:
.disable-anchor{
pointer-events: none;
cursor: default;
}
and then just add this class to your anchor like:
<a href="javascript:void(0);"
class="disable-anchor"
onClick="call_levelofcourse();popup('popUpDiv1')">
Level of Course
</a>
P.S. check the availability of pointer-events before using it because this is the CSS3 feature.
Try this
$(".WIWC_T1 a").click(false);
To prevent events, like a when clicking, prevent that event like this:
$(".WIWC_T1").on("click", function(e)) {
e.preventDefault();
//Do your code, such show a popup
}
Level of Course
function call_levelofcourse(){
if(!$("a").hasClass("unclickable")){
/* your codes here */
}
}
$(".WIWC_T1 a").on("click", function(){
$(this).attr("onClick", false);
});
Please remember to add Jquery prototype
Thanks Vivek
$(".WIWC_T1 a").removeAttr('onclick');

jquery dialog not appearing on click

I have a span that I want to create a jquery dialog on when it is clicked.
I have included this in the header:
<script type="text/javascript">
$(document).ready(function () {
$('#quote_dialog').click(function () {
$('#quote_dialog_open').dialog('open');
return false;
});
});
</script>
The following is the span (havent included content):
<span id="quote_dialog">
content
</span>
And the div is just a box on the screen:
<div id="quote_dialog_open">
content
</div>
I assume I need to hide the div using CSS? Will jQuery make it popup as opposed to just appearing?
Nothing is happening at present when the span is clicked.
Firstly, Make sure you are also including the relevant jquery UI...
Secondly, look at this fiddle, it shows you the solution.
$(document).ready(function () {
// next add the onclick handler
$("#quote_dialog").click(function() {
$("#dialog").dialog();
return false;
});
});
http://jsfiddle.net/k0nzhtLw/
Hope it helps :)
wild guess, your problem is the typo, change
$('#quote_dialog_oepn').dialog('open');
to
$('#quote_dialog_open').dialog('open');

Using javascript to hide div

I am using Javascript to hide a search box until a box is clicked. That works fine.
However when the page is first loaded, you can see the search box there and then it disappears once the page has fully loaded.
How can I make it hide and not show at all until my button is clicked..
This is the Javascript:
<script type="text/javascript">
$(function(){
$(".search").hide();
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
.search is the actual search box
.clicktosearch is the box the user must click for the actual search box to show up.
They only thing I have tried is to move the Javascript above the html box but, to no luck, now I am asking you all on SOF.
You need to use
display:none
in the CSS to hide it initially. The javascript only executes after the page has loaded so you will always see it briefly before the javascript kicks in.
This is what you need:
CSS
.search { display:none;}
JS
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I removed $(".search").hide(); because it's unneeded and may cause other problems. (JQuery doesn't need to hide something that's already hidden via CSS.)
BTW: If there's only one element that matches .search, it should really be an id and so #search. Same goes for .clicktosearch.
Hide it using css .
.search { display:none;}
The reason for this happening is the javascript getting loaded after the css and HTML take affect.
Hide it using CSS, the time lag before the div hides will be less.
You have the .hide inside of document.ready, $(function(){ is short for $(document).ready(function() {
So just put it before the document.ready and it should work...
<script type="text/javascript">
$(".search").hide(); //moved this line too here
$(function(){
$(".clicktosearch").on("click", function(){
$(".searchr").slideToggle("600");
although, What I personally would prefer is just in your css hide it.
Like so,
.search { display: none; }
You'll have to touch the CSS.
.search {
height: 0px;
}
Then in your JavaScript:
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});

Hover div jquery

Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)
This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/
Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});

HTML Divs show/hide issue

Hi friends I have issue with divs.
I have a link show/hide dive on my page on clicking which i have to show or hide specific divs.
I am successful with doing it.
But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again.
I don't want to scroll this and don't want to get to top.
Please help me out with this.
Thank You in advance.
Update:
Friend I got the answer from one of my friend.
Actually I was using
Because of href="#" URL get changed and page got to top every time I click on that link.
Are you trying to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="container">
</div><!-- end of #container div -->
<a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
</div><!-- end of #wrapper div -->
</body>
</html>
Here's the css:
#container {
width: 300px;
height: 300px;
background: red;
margin-bottom: 20px;
}
#wrapper {
margin: 40px auto;
width: 400px;
}
And here's the jquery
$(function() {// When document is ready, run this...
//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
// Grab the div with the id #container and show it
// Alert me when you're done
$("#container").show(2000, function() {
alert("I'm done showing");
});
});
//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
// Grab the div with the id #container and hide it
// Alert me when you're done
$("#container").hide(2000, function() {
alert("I'm done hiding");
});
});
// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
// Grab the div with the id #container and show if hidden / hide if shown
$("#container").toggle(2000);
});
});
Of course you'd have to link to a copy of jQuery before using the script above.
Here's a link to a demo: http://jsfiddle.net/tonystark/HhNBA/
Assuming you have a link
Inline (not recommended but likely what you have)
<script>
function showhide(id) {
var elem = document.getElementById(id);
elem.style.display=elem.style.display=="none"?"block":"none";
return false; // MANDATORY
}
</script>
Toggle
<div id="someId">Show or hide me when you click a link</div>
You have to cancel the default behavior of the onclick handler of your link. For doing so, don't use return false in your click handler, but rather use event.preventDefault():
HTML:
hide me
<div id="#targetdiv">blah</div>
Javascript:
document.querySelector('a.foo').onclick = function(event) {
try {
document.querySelector(this.getAttribute('href')).style.display = 'none';
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
}
JQuery:
$('a.foo').click(function(event) {
try {
$($(this).attr('href')).hide();
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
})
More informations:
http://www.quirksmode.org/js/events_early.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
It happens because your link is pointing to something like #foo or just #, whereas it should not have a href (or have an empty one)...
remove the href attribute and apply a text-decoration style
<a style="text-decoration: underline;" title="click me"></a>
that'd seem to make more sense than applying an href you dont want, to block its normal operation later. an alternative for graceful degradation would be to use the href to point to the shown/hidden div, displaying normally by default and having javascript hide it where javascript is available.
"Change your anchor (link) to a span so that it doesn't have that behaviour. Then, style it using css so it looks how you want it to look."
i often use that techique. i.e., use a span or div with an onclick, styled with text-decoration: underline, cursor: pointer and possibly display: inline if you decide on a div. one caveat is that in IE6, css hover won't work on anything other than an anchor. that's easily fixed with javascript.
you could probably remove the href attribute completely. anchors have advantages as above (cross-browser :hover styles) and allow for a title attribute for tool tips etc.
you probaby have a # in href attribute like href=# please remove hash and instead of that write href='javascript:void(null);'

Categories

Resources