I have a table where each visible row has a row beneath it whose visibility can be toggled by pressing a button. A live demo of this can be found here.
I'm really new to using jQuery and the problem I'm encountering is probably a simple fix to be honest. First of all, I want the togglable rows to be hidden by default and only shown when the button is clicked (now they show when the page is loaded). How can I do this?
To hide the rows I have the following:
$(document).ready(function(){
$("#button1").click(function(){
$(".trhideclass1").toggle();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$(".trhideclass2").toggle();
});
});
I don't want to have to create a function for every button separately, so what is a better way to do this? My idea was to give a <button> and <tr> the same id and somehow make the button only toggle stuff with the same id, is this possible?
You can add a class to the buttons (like btn-toggle) and then traverse the DOM for getting the target element:
$(".btn-toggle").click(function() {
$(this).closest('tr').next('tr').toggle();
});
The values passed to the .closest and .next methods can be any valid selector. For understanding how these methods work you can refer to the jQuery documentations.
https://jsfiddle.net/mc1dkq6a/
You can set default hide in css
.trhideclass1,.trhideclass2{
display : none;
}
For more easy to handle you should change your button id only as number
HTML
<button id="1" class="btn btn-primary">Click me</button>
<button id="2" class="btn btn-primary">Click me</button>
JS
$(document).ready(function(){
$(".btn").click(function(){
current = $(this).attr('id');
$('.trhideclass'+current).toggle();
});
});
Related
I can only use JavaScript to edit my checkout page, I am trying to hide and add styles to multiple elements using the least amount of characters.
Here's an example of one of the elements.
<div class="section section--remember-me shown-if-js">
<div class="content-box__row content-box__row--tight-spacing-vertical content-box__row--secondary">
Also trying to change the width of a button and make sure that the class.
<div class="step__footer" data-step-footer="">
This the parent of where the button is located in, and I want to make sure that the text thats also in this div isn't next to the button, but under it so I think I have to add style="display: inline-block;"
The button class is called
<button name="button" type="submit" class="step__footer__continue-btn btn ">
This is the code I have so far. I haven't been able to get it to hide multiple elements yet.
if (document.querySelector('.section--example') !== null) {
if (!element.classList.contains('example1')) {
element.classList.add('hidden');
};
document.getElementById("step__footer__continue-btn").style.width = "100%";
};
if-blocks do not need semicolons btw
document.querySelectorAll(".section--example:not(.example1)").forEach(hide);
function hide(element) {
element.classList.add("hidden");
}
To effect all element in an HTML class in jQuery it's like:
$(function(){
$('.sectionExample').css('background', '#000;');
});
or
$(function(){
$('.sectionExample').each(function(increment, element){
var current = $(element);
current.css('background', '#000;');
// this way is more versatile, if working with other Elements
});
});
I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.
When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.
You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});
I am facing a little issue with some jquery code. I have some divs (look bellow)
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>
I am trying when user clicks in each div with class add to fadeout the specific div and fade in the next div with class added.
Check my Code:
<script type="text/javascript">
$(document).ready(function($){
$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
});
</script>
ID's must be unique and it should not be a number. You have to set different ids for your divs. Additionally you have to hide the div with class .added initially to achieve your need.
Because fadeIn wont work on elements which are already visible.
Try,
<script type="text/javascript">
$(document).ready(function($){
$('.added').hide();
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeIn("slow");
});
});
</script>
DEMO
You need to use $(this) to hide current element and use next to hide .added, also use unique ids to make your html valid.
The next element is already visible you probably need fadeOut() to hide it.
Live Demo
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeOut("slow");
});
You can't have same id on multiple elements. Instead use a class
$('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });
Couple of points:
Ids should be unique. In case, you need same selector on group of elements, use class.
this reference contains the target on which event listener is added, So your this context contains the element with add class. jquery.find() tries to match the selector on the children. That's why your code is not working.
Just try this Jsbin Demo
HTML
<div class="wrapper">
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
</div>
JS
$('.wrapper').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
Idea: Bind event listener on parent.
I have a HTML Div (I'm using Twitter Bootstrap to hide-show div2) looking like this:
HTML:
<div id="div1">
<button id="mybtn">Button</button>
<div id="div2" class="modal hide fade span12" style="display: none;">
<button id="anotherButton" data-char="">AnotherButton</button>
</div>
</div>
With jQuery im trying to change the Value of data-char while im clicking on mybtn. But without success cause div2 is hidden. console.log($('#anotherButton')); return an empty array.
Is there a way to access hidden DOM with jQuery or Javascript?
*Edit: *
By trying this dont work better , return undefined:
$('#mybtn').live('click', function(e)
{
//or e.preventDefault();
$('#anotherbutton').attr("data-char", "assigned");
alert($('#anotherbutton').attr("data-char"));
});
You can assign it
Live demo
$(function(){
$('#anotherButton').attr('char', "assigned");
alert($('#anotherButton').attr('char'));
});
on Button click
Live Demo
$(function(){
$('#anotherButton').attr('data-char', "assigned");
alert($('#anotherButton').attr('data-char'));
});
It looks like data method will not work on elements which are in hidden state. You should use attr method.
This should work fine
$(function(){
$("#mybtn").click(function(e){
e.preventDefault();
$("#anotherButton").attr("data-char","new value");
});
});
Working sample http://jsfiddle.net/kshyju/a7Cua/4/
The fact that it is hidden changes nothing. The problem is probably that the js code is before the button HTML. Either put it after, or put it in a listener like $(document).ready() to make sure it has been processed when your try to access it.
Try $(button:hidden)
This usually works for things like this,
Source:http://api.jquery.com/hidden-selector/
I am new to Jquery. My setup is as follows:
I have a series of divs that need to be able to be toggled (display hidden and shown). Each div has an action that can be performed so a unique ID will be necessary to know from which div the event came from.
To toggle the div I have a button for each div (which is not located within the div to be toggled).
Right now without jquery, I use the button's onclick event to pass the ID of the corresponding div to be toggled. Using the unique ID I can do the following:
function toggleFlag(divId) {
var div = document.getElementById(divId);
div.style.display = (div.style.display=="block" ? "none" : "block");
}
divId is unique so I also know where the event comes from if action within the div is performed.
the anchor code looks something like this:
onclick="toggleFlag('id-111');"
where the '111' is the unique id
First off, is it even worth it to use jquery for this if the extent of my javascsript isn't much more complicated (aside from maybe simple ajax).
More importantly, how would this properly be done using jquery?
Update: I am very close to solving this. I managed to get it to work using one of the suggestions below requiring unique class names for each button. A couple of the methods suggest implementations where the class name is the same for all buttons (I want this in order to be able to statically assign styles to the button class), but I could not get these to work. Could somebody please elaborate on the solution? Thanks!
Let's say that you build your anchors to have an id that corresponds with the id of the DIV to toggle and further that they all have a common CSS class. For example,
Toggle
<div id="d_111">Some stuff.</div>
Now you could use jQuery to build the click handlers for all of these pretty easily.
$(function() {
$('a.toggleButton').click( function() {
var divId = $(this).attr('id').replace(/a_/,'d_');
$(divId).toggle();
});
});
You could do something like this:
HTML:
<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("class");
$("#" + divId).toggle();
});
});
This approach has the advantage of only defining the event once for all buttons. You could also use another strategy for storing the div id in the button information, like a non-standard attribute - which jquery can pick up as well, or make the div id a part of the button id like so:
<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>
and then extract the id of the div from the id of the button clicked (personally this is the approach I'd take)
Hope this helps
EDIT: To answer the first question, yes you would benefit from doing this with jQuery since it would shorten the amount of code that you are writing and it would allow you to move to unobtrusively assigning events to the buttons which is a good thing :)
EDIT 2: Using non-standard attributes:
HTML:
<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("divid");
$("#" + divId).toggle();
});
});