How do I use the jQuery click method to show hidden elements? - javascript

This is a pretty basic question, but I've been working at it for a while and can't figure out the solution.
I have a series of <li> items in an HTML document. At the end of each, I have a button that I want to, when clicked, show some hidden text.
<ol>
<li>Click this button to show hidden text <button>Click</button>
<p style="display:none;">Some text</p></li>
</ol>
Since I have a series of these <li>, I figured the easiest way to do this is having each button click show the nearest hidden element through JQuery
Here's the JQuery code I've been trying to use:
$('button').click(function() {
$('p.pages').nextUntil('li').toggle('slow');
});
To be honest, I'm not sure I'm using the right JQuery method to do this, but I've tried looking through the JQuery docs and it seems like this best fits what I'm trying to do.

What you looking for is
$('button').click(function() {
$(this).next('p').toggle('slow');
});
fiddle

There are multiple problems with the code you presented.
You're using the p.pages selector, which looks for a <p> with class="pages". You'll find nothing in your document with this selector.
Another problem is that because you're using the $('button') selector, this will apply to all <button>s on your page, not just buttons in that list.
Next, you're looking for elements after the <p>, when you're actually trying to toggle the <p> itself.
The last problem is that this code will only support one such item. You're not specifying which <p> to select, so when you click any button on your page you'll hide the first <p>, even if the button is further down the list.
Solution
I would assign a class to the button to select it, in case you have different button types.
I'd also use the $(this) (for the button), and .next('p') to find the p right after the specific button you pushed.
Then I'd remove the CSS display using .css('display', 'inherit'). Or use .toggle('slow') like in your original question:
See this fiddle.
HTML:
<ol>
<li>Click this button to show hidden text
<button class="makeVisible">Click</button>
<p style="display:none;">Some text</p>
</li>
</ol>
JS:
$('button.makeVisible').click(function() {
$(this).next('p').css('display','inherit');
// or: $(this).next('p').toggle('slow');
});

$('button').click(function() {
$(this).next().toggle('slow'); });

Related

How can I display further text after a div element is clicked?

Currently I am working on a personal project. You can see the website I am making so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
The problem is that I am struggling to add the following feature. The feature is when a user clicks on any of the 6 colored boxes, a further information section should display like below:
I have tried adding a paragraph with an id that has it's display set to none initially. When the user clicks on one of the boxes, the corresponding text for that topic should be shown.
HTML
<p id="fbAdCampaignText> Example Text here </p>
CSS
#fbAdCampaignText {
display:none;
}
.display {
display:inline-block;
}
jQuery
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaignText").toggleClass("display");
});
Note: i am using display:none instead of visibility:hide because I don't want the hidden text to take up space since if it did, it may mess up the structure of each of the 6 boxes.
However, this code doesn't seem to do what I want, that is, show corresponding further information depending on which 1 of the 6 boxes is clicked. How can I display further text after an element is clicked in this manner?
You meant this?
https://codepen.io/dravas/pen/NVgvgN?editors=1010
Just change
$("#fbAdCampaignText").toggleClass("display")
to
$("#fbAdCampaignText").toggle()
And if you want to trigger only that div that is inside clicked element then:
$(".fbAdCampaigns").on('click', function(){
$(this).find("#fbAdCampaignText").toggle();
});
Okay, a couple of things here. Firstly, you can't have more than 1 of the same id in your document, so if you have 6 of those paragraphs, lose the id and use a class instead.
Using an id also gives you specificity issues, where the .display class would still have been overridden by the id's styles.
The other thing is that in your jQuery, you're going to toggle the class on all of those elements if you use a class. You need to specifically toggle the class for the element you clicked, so use $(this) instead - to target the element you clicked.
HTML:
<p class="fbAdCampaignText> Example Text here </p>
CSS:
.fbAdCampaignText {
display:none;
}
.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
display:inline-block;
}
jQuery
$(".fbAdCampaigns").on('click', function(){
$(this).toggleClass("display"); // only target the clicked element
});

Make entire DIV block clickable

I have a script on my site and using jQuery it makes the variation-value div element clickable.
Unfortunately the areas with the p & div tags aren't clickable. Is there an easy fix for this?
jsfiddle example ::: http://jsfiddle.net/xb4qkdLu/ :::
<div class="variation-value">
<p class="left" style="background:green">left aligned text</p>
<div class="right" style="background:red">right aligned text</div>
<p></p>
</div>
What I'm seeing in the jsfiddle you posted afterward, is that you are binding the click to the td element within the variation class ($('.variation').on('click', 'td', function(event){...).
Based on what you wrote, and the comment I've left under your original post, hooking a click trigger listener to the .variation-value' class would solve this for you (as you've currently got no events tied to it).
If you would like to supplement you original script, you would either have to go around with some CSS "hack", by adding to the css of p and span within the td the following pointer-events:none; (will require some extra IE fine-tuning), or you could also add the other elements within the td to the trigger listener.
Code sample:
The CSS would be like (considering normal-case browser):
.variation-value > p, .variation-value > div { pointer-events:none; }
The Jquery would be:
$('.variation-value').on('click', function(event){ ... }
Do keep in mind that your left element is bound to reset your values list if it is visible (haven't found any trigger set for the right element). If you are enabling a click-through effect for all the elements within your .variation-values, you are losing the reset-effect bound to the left element. Is that surely what you are looking to achieve? If so, just go wihout the above CSS snippet, and you will have it all function as you would like.
Also just to note, in your HTML markup, you are putting elements in the following hierarchy:
div.variation-value
p[left]
div[right]
You aren't closing your p element before adding in the div for the right element that is it becomes a child of the p. I'm assuming you should've closed the p tag to ensure functionality as intended.
http://jsfiddle.net/hasecbinusr/pctgs5ke/
$(document).ready( function(e) {
$('.variation-value').click(function () {
alert('You clicked it!');
});
});

Is there a correct way to hide a jQueryUI checkbox button?

I have a checkbox that I'm using with the jqueryui button widget and I would like to be able to show or hide it depending on other factors. However, I'm finding that .hide() doesn't work. Upon digging deaper, it appears that it doesn't work because caling .hide() on the checkbox would only affect the checkbox element and not the button element being displayed to the user.
I'm sure that I could use jquery and some knowledge of how the button is rendered to hide the element, but that becomes implementation dependent and I would prefer to avoid that so it doesn't break with a future version.
Alternatly, I could wrap the whole thing in some other element and show or hide that instead. This is probably the best idea of the ones I've been able to think of, but I'll have to play with the CSS to make sure that this extra element doesn't throw off the layout of the rest of the page.
Is there a correct way to do this?
Here is a jsfiddle showing that .hide() does not work.
http://jsfiddle.net/ormico/2zxde/
<label for="a">AAA</label><input id="a" type="checkbox"/>
<button id="h">Hide</button>
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
$("#a").hide();
});
this work but i don't know why... put the html code into a div an hide/show this
<div id="pre"><input id="a" type="checkbox"/><label for="a">AAA</label></div>
<button id="h">Hide</button>
and jquery
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
$("#pre").hide();
});
You can find documentation for your button/checkbox here : http://api.jqueryui.com/button/#method-destroy
You can do it this way :
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
// destroy jQueryUI button
$("#a").button('destroy');
// and then hide the original checkbox
$("#a").hide();
});
You are correct it is only hiding the actual input element. If you also want to hide the label, (ui-widget). You could do something like #13ruce1337 said or something like this:
$("#a, label[for=a]").hide();
Here is a jsfiddle example.
The answer is simple: the button consists of 2 DOM elements in your html tree.
Simply call hide() and show() on both instead of just 1:
$("label").hide();
$("#a").hide();
Demo: http://jsfiddle.net/2zxde/16/

How to use the same JQuery effect for different divs with same class

I'm not really into using javascript and jQuery so please add detailed answers.
I need to add a jQuery effect to different divs with the same class, so that when I click on a div 1 with class item, another div info will appear in a specific container.
Also, if I click on div 2 with the same class item, another div pics will appear in the same container as info while info will disappear.
I was going to use this:
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
But this is not valid for using about 10 divs and another 10 displaying and hiding divs.
I would use many lines of code and I am not sure that it would work.
You could use the selector $(".item") to get all the divs you're interested in.
Class selector sounds like what you need: http://api.jquery.com/class-selector/
You can differentiate the ids once you're inside the click call and take a different action. but the class selector will let you use the click event handler on all of the divs you're interested in.
sample code below
$(document).ready(function(){
$(".item").click(function(e){
// output the id of the clicked item
console.log($(e.target).attr("id"));
if($(e.target).attr("id")=="box1"){
//do something for if the clicked item is box1.
$("#box1").fadeOut(250);
$("#box2").fadeIn(500);
}
});
});
Without your html, it's hard to say exactly. But, here's a starter point.
Your existing jQuery is like so, which is grabbing every div by ID.
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
An improvement would be to use a class rather than an ID, and you could do something like so.
NOTE: The below assumes you assign either a different class, or an additional class of itempic to the div(s) you want to trigger the pics to be displayed:
$(document).ready(function(){
$(".item").click(function(){
$(".info").fadeOut(250);
});
$(".itempic").click(function(){
$(".pics").fadeIn(500);
});
});
If you have multiple divs that are going to have this same functionality (for example, you've got a bunch of products, each with an info box and a pic box), then you'll need to do something with "containing" the selectors to the given items. With some example HTML, I could provide an answer that takes that into account.
Structure you html similar to this
<div id="container">
<div id="info">info contents</div>
<div id="pic">pic contents</div>
</div>
<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.
and use
$(function(){
$('#container').children().hide(); // initial hiding
$('.item').click(function(){
var relatedId = $(this).data('related');
$(relatedId).show().siblings().hide();
});
});
Demo at http://jsfiddle.net/gaby/mTSZv/
When selecting with jQuery you need to use #id_name for IDs and .class_name for classes. When selecting div, tr, td, ... you need no special symbol before the name. So:
$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items
IDs are unique. Classes can appear more than once.
Just read the examples on jQuery API
In order to get started with JS jQuery is very good. Very fast to do, but don't forget jQuery is a library that has to be loaded making these short commands possible. Pure javascript will be faster.
Don't forget, you can combine JS and jQuery, as jQuery is JS. Switching to pure JS will also make you see what your scripts exactly do.

How to remove a JavaScript initialisation?

What I am trying to achieve is a second dropdown list to be populated with values based on the selection of the first dropdown list.
I've got it to work using the following:
http://jsfiddle.net/ydPfH/6/
The problem is that an external plug in that I am using to display images in a drop down list somehow stops this code from working properly.
The code that initalises this plug-in is $("body select").msDropDown(); and what I have below the simple search form that uses this plug-in is a jquery expandable div so you click Advanced Search to expand the form with the dynamic dropdowns.
<a href="#" rel="toggle[advancedsearch]" data-openimage="images/collapse.png" data-
closedimage="images/expand.png">Advanced Search<img id="expand"
src="images/collapse.png"/> </a>
<div id="advancedsearch">
<p>Document Properties:</p>
<form>
<select id="tags" name="tags" class="tags">
etc....
What I'm hoping for is some kind of onclick or something even easier to call to another JS method to somehow remove the $("body select").msDropDown(); initialisation or to even initialise something silly that in turn removes it.
Full source of the page can be seen here if it helps: http://jsfiddle.net/pQ9LT/
Thanks,
Martin
If I'm getting this right, here is the answer:
You should add class attributes to the <select> elements that are going to be using your msDropDown plugin. Then initialize the plugin like this $('select.yourClass').msDropDown();
where yourClass is the class name you assigned these <select> elements.
The body part in your selector is superflous.
This way, jQuery will only apply the plugin to the <select> elements "marked" with you class name and not all of them so you can use the other "normal" <select> elements without interference.
Hope I helped you out.
I'm not completely clear on what your overall requirements are and what may or may not be acceptable so where are a few thoughts that I have.
Give the select elements you do not want styled as image combo boxes a class or an id. Then use the :not() selector in combination with your msDropdown initialization
$("body select:not('.nostyle')").msDropDown(); //using the class 'nostyle' to filter out the elements that should get the image combobox
Use a more specific selector in the initialization call; this is kinda the opposite of the above
$("body select.classOfSelectsTobeStyled").msDropDown(); //using the class 'classOfSelectsTobeStyled' on elements that should get the image combobox

Categories