Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
Related
for last few days I'm working on a project, now in this project, I have a sidebar with buttons like this
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
Also, I have some javascript for mouseenter event code like this
$(function).ready(function(){
$('.btn').mouseenter(function(){
$('.btn').css('color', 'red');
});
});
Now the problem is this javascript code is changing all the elements with the same class. I don't want it. I want to change only one button.
For example, if hover on the first button, the javascript code should change the color of the first button only, not other buttons
For some reason, i can not use CSS for this case
So can anyone help me to solve this problem
You need to reference the element specifically with $(this) otherwise all elements with class ".btn" will change:
$('.btn').mouseenter(function () {
$(this).css('color', 'red');
});
If you need to specify which element with the same class name, you can use .eq(). $("div.btn") would mean all <div> elements with the class btn. However, if you do $("div.btn").eq(0), it would mean the first <div> element with the class btn. Similarly, .eq(1) for the second element and so on.
It should be like this.
$(function).ready(function(){ $('.btn').mouseenter(function(){ $(this).css('color', 'red'); }); });
$(document).ready(function(){
$(".btn").mouseover(function(){
$(this).css('color','red')
});
$(".btn").mouseleave(function(){
$(this).css('color','#000000')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
I am trying to do the show/hide function with some containers and text.
When i click on a certain container I want a paragraph to hide. At the moment I am trying to work out when I click the "left" container, the paragraph "barbertext" to disappear.
<p class="hairtext" style="color:red">We are Thairapy, an independent hair <br> and beauty Salon located in the heart<br> of Exeter. At Thairapy, we care about<br> our clients and our main aim is to go<br> that extra mile and look after every <br> one of our happy customers.</p>
<p class="beautytext" style="color:red">Our beautician, Shail Dutt has over<br> 10 years of experience within the beauty<br> industry. Shail is a very dedicated and<br> passionate person, she strives to make<br> her clients feel loved and special. </p>
<p class="barbertext" style="color:red">A decent Mens haircut needn't cost the<br>Earth. We offer top quality Men's haircuts<br> from £7. </p>
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
The Javascript that I am working with is this:
<script>
$(document).ready(function(){
$("#hairtext").click(function(){
$("barbertext").hide();
});
$("#hairtext").click(function(){
$("barbertext").show();
});
});
</script>
If anyone could help I would be most appreciated.
You bind both handlers to the same element, so you hide and show each time you click.
Try toggle() so that it alternates between hide/show
$(document).ready(function(){
$(".hairtext").click(function(){
$(".barbertext").toggle();
});
});
(needed to add . to the barbertext selector, and . for the hairtext. # is used for ids)
I have made the following fiddle that should do what you need http://jsfiddle.net/Lyd9hgh2/
$(document).ready(function(){
var hidden= false;
$("#left").click(function(){
if(hidden){
$(".barbertext").show();
hidden = false;
}else
{
$(".barbertext").hide();
hidden = true;
}
});
});
You did wrong with your selector:
$(".barbertext")
I am not sure about what you want, but it seems as you want when the user click on the container, a associated div is showed/ hide.
I created a fiddle for that:
http://jsfiddle.net/BenoitNgo/0yL02nop/6/
Corrected the existing code: (as per your need - when I click the "left" container, the paragraph "barbertext" to disappear)
<script>
$(document).ready(function(){
$("#left").click(function(){
$(".barbertext").hide();
});
$("#left").click(function(){
$(".barbertext").show();
});
});
</script>
Improvments:
You can use Ids for containers and paragraphs both for performance
You can use jquery toggle function if you want a show/hide behavior on container click
I am pretty new to jquery and am trying to code this where each time you click on the content, the content is added to an existing div. However, the content will be constantly changing. I tried making it a variable, but it is still not working. Any help or advice is appreciated.
js fiddle: http://jsfiddle.net/tU2En/7/
html:
<button id="Add">Add Text</button>
<div id="content">
<p>Content 1</p>
</div>
script:
var text='#content p';
$(function () {
$('#Add').on('click', function () {
$('text').appendTo('#content');
});
});
Change:
$('text').appendTo('#content');
to:
$(text).appendTo('#content');
By quoting text, you're treating it as a string and jQuery is looking for an element named text.
jsFiddle example
I have a page so far with:
<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>
Where link here is like
google
What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.
So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".
So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.
like
$('#x1').onclick(function(){
alert('x1');
});
How can I do this better?
The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...
EDIT - Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.
<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>
and
function tomato(test){
alert(test);
};
Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.
use jQuery's live or delegate functions:
$('div a').live('click', function(ev){
alert($(this).closest('div').attr('id'));
});
The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.
The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:
$('#wrapperDiv').delegate('a', 'click', function(ev){ ...
The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.
You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call
myfunction(2);
or is the number not the problem?
$('#x1, #x2, #x3').click(function(){
alert($(this).parents().attr("id"));
});
EDIT:
Better version:
HTML:
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
$('.x a').click(function(){
alert($(this).parents().attr("id"));
});
Have you considered using a class to name them all as opposed to explicit ids?
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
so then you would be able to use a single click event for all of them?
$(".x a").click()
{
//Use $(this) to refer to the clicked item.
alert($(this).parents().attr("id"));
});
$('.myDivs').click(function(){
alert($(this).parent().attr("id"));
});
Or select the divs in some other way:
$('#x1').parent().children('div').click(...);
Something along these lines should work:
<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div>
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div>
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('a').click(function() {
alert($(this).parent().attr('id'))
return false
})
</script>
Add a class to each div, so you can select all of 'em at once.
<div id="x1" class="x">Text paragraph 1 <a>Click</a></div>
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div>
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div>
Then you can do:
$('div.x a').live('click', function(e){
e.preventDefault();
alert($(this).closest('div.x').attr('id'));
});
http://jsfiddle.net/VGh3X/1/
A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click') and bind to that.
$('.click a').bind('click', function() {
var div = this.closest('.click');
alert(div.attr('id'));
return false;
});
$(document).ready(function() {
var links = $("div[id^='x'] a"); //get the a tags
$.each(links, function(i,v) {
$(v).click(function() { //bind on click
alert(v.parentNode.id); //alert div id
return false; // stop
});
});
});
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();
});