I've written jquery for a toggle button...
$(document).ready(function(){
/* Needs to be re-written for multiple questions */
$(".full_question").hide();
$('.question a').after('<a class="show_full_question" href="#">more</a>');
$('.show_full_question').click(function() {
var el = this;
$(".full_question").toggle(function() {
$(el).text($(el).text() == 'less' ? 'more' : 'less');
$(el).toggleClass("hide_full_question");
});
});
});
it toggles between the full question width and partial width. But when clicked it toggles for all questions on the page. How would I get it toggle only one?
I know it has something to do with $(this) but not sure where it goes... I don't mind changing the html if necessary.
The html is...
<h3 class="question">
<a href="#">What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
<span class="full_question"> circumference of the earth? I really don't know!</span>
</a>
</h3>
The problem is $(".full_question").toggle(), will toggle all elements with the full_question class. You need to somehow link the current element being clicked with the proper full_question.
Since you have one full_question and one show_full_question button under the same parent you can use jQuery to get the parent and find the question to toggle:
$(this).parent().find(".full_question").toggle()
If you are certain that HTML structure won't change you can also do:
$(this.previousSibling.childNodes[1]).toggle()
Here's a jsfiddle example.
Related
Currently I have an unordered list of about 10 of these "container"s.
Each container has a description and a "help-more-content" button.
<div id="item" class="container">
<div class="item">UniqueIdentifierInt</div>
linkName
<div class="trackUri">someLinkUrlString</div>
<div class="description" style="display: none;">DescriptionString</div>
<a class="mt-help-more-content" href="#"></a>
</div>
The functionality is supposed to be when you hit the "help-more-content" button for this container, it will then display that containers description.
However at the moment when the button is clicked, it shows the description for ALL containers on the screen.
Here is the current on click
.on("click", ".mt-help-more-content", function(e) {
$('.description').toggle();
}
Now obviously this toggle function is being called on all "description" elements. How can I specify for it to only act on the current container?
I've checked out other answer here, here, and here but to no real avail.
Is it possible to only toggle the specific class? It doesn't seem you can toggle by an id.
I am new to javascript/html since my background is with Java, so apologies if this is something simple.
Any help is greatly appreciated thank you.
$.prev will do the trick:
.on("click", ".mt-help-more-content", function(e) {
$(this).prev('.description').toggle();
}
This should work:
.on("click", ".mt-help-more-content", function(e) {
$(this).siblings(".description").toggle();
}
I have HTML code for kind of blog page. Below - code of 1 post and its height cuts by CSS. It will be many posts on blog page. I want to see all content of particular page by clicking "Read More" button.
Div with blog content has dynamic id which gets from database by PHP.
How can I change height of div with class "blog_article" by clicking "Read More" button?
I thought of using JS/Jquery but cannot get id of "blog_article" div.
Or maybe there is some better way to do this?
<div class="blog_article_wrapper">
<div class="blog_article" id="<?php echo $id; ?>">
<!--Some content-->
</div>
<div class="blog_article_read_more">
<button onclick="blogReadMore()">Read More</button>
</div>
</div>
but cannot get id of "blog_article" div
Why can't you?:
<button onclick="blogReadMore(<?php echo $id; ?>)">Read More</button>
Or, if it's a string:
<button onclick="blogReadMore('<?php echo $id; ?>')">Read More</button>
Then blogReadMore() has a reference to the id:
function blogReadMore(id) {
// use the id to identify the element and modify it however you want
}
Conversely, since you tagged jQuery, you can traverse the DOM from the button click to determine the element without needing any id at all. Something like this:
$('.blog_article_read_more button').click(function () {
var article = $(this).closest('.blog_article_wrapper').find('.blog_article');
// do whatever you like with the article
});
There's a more straight forward way than Azim's answer, but based on the same ideas:
I would still use the read_more class, although not actually needed. I will assume such a class applied to the button.
$('.read_more').click(function(){
var blog_article = $(this).parent().parent().find('.blog_article');
blog_article.css('height', '100px'); //change height here
});
In this case I use .parent() method in order to get the parent object from the clicked item, rather than relying on .closest(). Two calls to .parent() are needed because the <button> resides inside a <div> and we need the parent of that div before we can drill down.
Alternatively:
$('.read_more').click(function(){
var blog_article = $(this).parent().prev();
blog_article.css('height', '100px'); //change height here
});
Because the button's parent <div> is the direct sibling of the one we're interested in. No selectors needed at all!
You have the id right there, you can generate it just fine with blogReadMore('<?php echo $id; ?>'). But you don't need the id, your button lives inside the thing you need expanded so you can look it up that way, too.
You're using fairly ancient JS event handling techniques so this won't be as clean as modern code should be (which doesn't use onclick and other things, but adds the event listening after the DOM has been set up), but you can just pass onclick="blogReadMore(this)" so that your blogReadMore function knows the element that triggered it. Then you just go through the sequence of element.parentNode until you find the element with element.classList.contains('blog_article')===true (both of those have equivalent jQuery calls)
Sort of an answer, but the real one would be "this is not a very good way to generate your code. Generate the HTML and then attach the JS event handling afterwards".
Use a class for read more button, say read_more like <button class="read_more">Read More</button>. And use following jquery.
$('.read_more').click(function(){
var blog_article = $(this).closest('.blog_article_wrapper').find('.blog_article');
blog_article.height(100); //change height here
});
Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.
I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?
You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).
To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});
Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});
I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you:
I have an application creating a bunch of divs through a loop.
Each div has the class "product"
so it looks like
<div class="product">
!.....stuff here ....!
<div class="show_on_hover">...buttons here... </div>
</div>
so there are about 12 of these same divs per page.
I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.
$('.product').hover(function() {
$(.show_on_hover).show();
},
function () {
$(.show_on_hover).hide();
}
);
That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.
Thanks!
find will find your .show_on_hover divs inside the hovered .product. Try this:
$('.product').hover(function() {
$(this).find('.show_on_hover').show();
},
function () {
$(this).find('.show_on_hover').hide();
}
);
Try
$('.show_on_hover', this).show()/.hide()
Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.