jQuery event affecting only this instance of the element - javascript

I have more than one element with the same class name, ideally they will be seven, so, on pageload they will be hidden and then I want to show the extra text when clicking on the anchor, but only for that very instance of the div, my jQuery code is currently removing hidden in all instances of the div, I am guessing the solution would be to add this somewhere. Thanks!
$(".show-more").click(function() {
return $(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>

You need to traverse the DOM to find the .extra-text element related to the one which raised the event.
To do this you can use the this keyword which will refer to the element that raised the click event. Try this:
$(".show-more").click(function() {
$(this).closest('div').find(".extra-text").toggleClass("hidden");
});

Use .prev() in this context.
$(".show-more").click(function(e) {
e.preventDefault();
$(this).prev().toggleClass("hidden");
});
Fiddle

.extra-text is sibling to .show-more, so u can use siblings() method to get adjacent sibling element
$(".show-more").click(function() {
$(this).siblings(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>

Related

Jquery text() doesn't work outside chrome console

I have this small piece of code
HTML
<div class="select">
<p></p>
</div>
<div class="option">
<p class="active">text</p>
</div>
JS
$('.option p').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
if ($('.option p.active').length == 0) {
$('.select p').text('some text');
}
}
})
If I run this code in the chrome console, it works perfectly. But if I run it in my programme, it doesn't work (the .select p text is not changed). I tried putting an alert() after text() to see if it would execute, and apparently alert() is executed, so text() should also be executed. I don't understand why it is not being executed in my programme (it was working perfectly a few weeks ago)
You need to put the code inside a click handler. When you click on an element, do different things depending on whether you clicked on the active or inactive element.
If it's active, remove the class and put the default text in the select paragraph.
If it's not active, remove the class from all the other elements and add the class to this element, and display its text in the select paragraph.
$(".option p").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(".select p").text("No option selected");
} else {
$(".option p").removeClass("active");
$(this).addClass("active");
$(".select p").text($(this).text());
}
});
.option p.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select">
<p>text 1</p>
</div>
<div class="option">
<p class="active">text 1</p>
</div>
<div class="option">
<p>text 2</p>
</div>
<div class="option">
<p>text 3</p>
</div>

how to remove class show from contentNote and addclass show to txtAreaNote with cick on btn-edit?

I have a div with the following structure. When I click on "btn-edit", I want to remove the "show" class from "contentNote" and add it to "txtAreaNote"; and to add "hide" to "contentNote" and remove it from "txtAreaNote". My jQuery code does not work correctly; how to fix this?
$('.btn-edit').click(function() {
var btn = $(this);
btn.each(function() {
$(this).find(".contentNote").removeClass('show').addClass("hide");
$(this).find(".txtAreaNote").removeClass('hide').addClass("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
find() searches children of the element you're calling it on. Use nextAll() or siblings() to find following matches (or any matches, before or after, in the case of siblings()).
$('.btn-edit').click(function(e) {
e.stopPropagation();
e.preventDefault();
var btn = $(this);
btn.nextAll(".contentNote").removeClass('show').addClass("hide");
btn.nextAll(".txtAreaNote").removeClass('hide').addClass("show");
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
I dont know your full html structure, but it will be something like :
$('.btn-edit').click(function () {
$(this).closest(".cm-1").find(".contentNote").removeClass('show').addClass("hide");
$(this).closest(".cm-1").find(".txtAreaNote").removeClass('hide').addClass("show");
});
Go to parent class and then search in between two classes.

Jquery hover on div, add styles on grandparent

I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com

Showing a div on button click

I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}
You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.

Toggle button to hide group of elements by class and display nextSibling in JavaScript or JQuery

Please check out my HTML markup:
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[1] only works for .para[1]-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[2] only works for .para[2]-->
When .btn[0] gets clicked then .para[0] should be display:block, but all other para[1], para[2] , ...., para[n] will be display:none.
How can I achieve this in JavaScript or JQuery (without adding unique id's)?
You can hide all the .para by default using css:
.para {
display: none
}
and using below code to show the expected paragraph as well as hiding other paragraphs
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
Fiddle Demo
try this
$(document).ready(function(){
$('.para').hide();
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
});
See FIDDLE

Categories

Resources