I am wanting to use jquery to do a show/hide of a DIV from a text link.
What makes it a little different from the examples I have found of this site so far is I need a generic way of doing it multiple times on 1 page and also able to use it sitewide on anypage.
It would be really nice if I can put the JS in seperate file that is included into the pages, so maybe it can be wrapped into a function?
Can someone help me here? For making it generic it could be where I assign a div that is shown/hidden with an id like id="toggle-hide-1" and just change the numbers in my page to make it a different show/hide area
I could just name the ID using a name that will make the function show/hide a div and to seperate it from other divs that show/hide on a page I could add a number to it.
below is partial code that will do a show/hide of a div on a link click but is not exactly what I need.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
$(".tool_block, .view-code").toggle();
});
});
</script>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
The best approach is probably going to be something using custom attributes. If you markup your anchor with an attribute that tells the jquery which div to toggle, it will be easier to write generic code to do the work.
Something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
var d = $(this).attr("toolDiv");
$(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
});
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
hide code <br />
<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
Then give each of your anchor-div pairs a unique toolDiv value (doesn't have to be a number).
If you could wrap the whole collection in a div, it would make it pretty easy.
$(function() {
$(".view-code").click( function(e) {
$(this).siblings().andSelf().toggle();
});
});
<div>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
</div>
If it doesn't handle the <br />, you could filter the siblings to only div and anchor elements.
Why not use specific classes instead? Each element you want shown/hidden can have a class called "toggler," as in:
<div class="toggler">
...
</div>
You can then toggle the visibility of ALL elements with this class at once, with:
$(".toggler").toggle();
In this scenario, it doesn't make a difference where in the document these elements reside or even what kind of elements they are.
If this functionality needs to be available globally, you can always extend jQuery itself with a custom function, as in:
$.toggleTogglers = function(toggleClass) {
$("." + toggleClass).toggle();
};
This is nice in that you have flexibility to choose a toggle custom class of your own design.
Related
This seems to be a common question, however when I check the answers, they're all different.
I have a row of five links. Each has a corresponding div below. When I click a links, I want its div to display and all others to hide.
Here's some code I came across that seems to be on the right track:
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
But if I use "a" without a destination, clicking the link takes me to the top of the page. I just want the divs below to show or hide...
Can I use "button" or "div" instead of "a"? If so, what would I use instead of "rel"?
Sorry for the noob question. I just can't seem to make any of the solutions I've found here work for my site. What's the simplest way to do this?
Here's some HTML that definitely works with the jquery script above:
$('a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
However if my href="", clicking that link bounces me up to the top of my page for some reason. So I'd rather use a clickable div or a button rather than a hotlink. In which case, what can I use in the script instead of "rel"?
It seems you only need to prevent the default behaviour by adding e.preventDefault();
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
You can use below values on your href.
Anchor
Here is the complete explanation for javascript:void(0)
The JavaScript void operator evaluates the given expression and then
returns a value of undefined. https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm
Try using href="javascript:" or href="#" instead of leaving the attribute empty. href="" tells the browser to reload the current page that you are in, which is why it bounces you to the top of the page.
You can also use <button> or <div>, the effect will not be very different from using <a>. You can also use rel if you are using <button> or <div>. In fact, it is arguably better to use rel on <button> and <div> because the attribute does not have any functional purpose in those tags. On the contrary, <a> uses the rel attribute to specify a few things to browsers.
Target attribute does not suitable for divs it is only for windows or iframes. Also, hyperlink should has href attribute otherwise it will be an anchor or placeholder link in HTML5 specifications.
You may use any conjugation attributes between the link and its div such as link title will be div id.
Example:
Show DIV 1
Show DIV 2
Show DIV 3
<div id="div1" class="linked-div" style="display: none"> One</div>
<div id="div2" class="linked-div" style="display: none"> Two</div>
<div id="div3" class="linked-div" style="display: none"> Three</div>
<script>
$("a").click(function(){
divId = $(this).attr("title");
$(".linked-div").each(function(){
if ($(this) == $("#"+divId)){
$(this).show()
}
else{
$(this).hide()
}
})
$("#"+divId).show();
})
</script>
DEMO
My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?
We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output
I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.
This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!
Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});
My plan is to have lots of boxes (an undefined amount). When show box is clicked under a box, it shows that particular box.
I have some unique divs in my html. The div is made unique by:
<div id="box-<%=box.id%>"></div>
In my application.js, I have
$('.show-box > a').click(function(){
$('#box').show();
});
I obviously need to have the box-id in the $('#box').show(); part but I'm unsure how to do that...
EDIT: adding more information
<div class="show-box">
Show
</div>
<div class="box" id="box-<%= box.id %>"></div>
The class is for styling.
Just to add, I know that the javascript link should link to an actual link. I'll fix that later.
You would use this inside the handler to refer to the specific .show-box > a that was clicked.
So it depends on what the relationship is between that and the box element you want to display.
When you say under, if that means that it is a sibling to the .show-box element, you can use .parent() to traverse up from the <a>, then use .prev() to traverse back to the box.
$('.show-box > a').click(function() {
// "this" refers to the <a> that was clicked.
$(this).parent().prev().show();
});
Ultimately, the correct solution depends on your actual HTML markup. If you provide that in your question, it would be helpful.
You could select by ID if you want, but it is often not necessary.
On easy way would be to name your box ids after you a ids, or write another attribute into the a. For example if your a tag's ID was "anchor1", assign the corresponding div an id of "box-anchor1". Then, reference it like this:
$('.show-box > a').click(function(){
$('#box' + this.attr('id')).show();
});
If the box and the link that shows it are logically related, you can skip the whole unique ID business by using the following:
HTML
<div class="container">
<div class="box">
<!-- stuff in the box -->
</div>
Show
</div>
jQuery
$("div.container a").click(function() {
$(this).prev().show(); // prev() will get the div.box element.
});
On the other hand, if they are not related structurally, you can use the fragment part of the URL to reference the box ID:
HTML
<div>
<div class="box" id="box-1">...</div>
<div class="box" id="box-2">...</div>
</div>
<div>
<a class="boxtoggler" href="#box-1">Show Box 1</a>
<a class="boxtoggler" href="#box-2">Show Box 2</a>
</div>
jQuery
$("a.boxtoggler").click(function() {
var boxId = $(this).attr("href");
$(boxId).show();
});
Note how we're abusing the fact that the fragment section of a URL is preceded by a # character to make it into a css ID ;)
Not sure I understood your question, but if you want to show the clicked box:
$('.show-box > a').click(function(){
$(this).parents('.show-box').show();
});