I need specific jquery or js function to display onclick:
<div id="resultTab">
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
</div>
It can be repeated 50-100 times.
So when I click button it has to show only <div> which is written after that <button> not all <div>s
Note: all button and div's created by jquery so I can't give specific id to use in function.
Please help me to solve this problem. I'm totally stack, if its possible I want to display that <div> in the middle of page like popup window.
UPDATE: The function is working, but in this situation its not working, what can I do?
Don't use the same ID everywhere, ID need to be uniqe. I changed your ID's to Class
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
$("button").on("click", function() {
$(this).next().show();
});
if you use toggle(), you can hide and show the div
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
You should not have the same ids attached to multiple elements. You can use next() to select he next element after the button and slideToggle() to show/hide the div:
$('input[type="button"]').on('click', function(){
$(this).next('.help').slideToggle();
});
.help{
display: none;
}
input[type='button']{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultTab">
<input id="help_button_1" type="button" value="Full Info">
<div id="help_1" class="help">Table with data</div>
<input id="help_button_2" type="button" value="Full Info">
<div id="help_2" class="help">Table with data</div>
<input id="help_button_3" type="button" value="Full Info">
<div id="help_3" class="help">Table with data</div>
</div>
Related
attached is my javascript and html.
in debug mode, I can confirm that 'display: none' changes to 'display :block'
but I don't see popupEventForm form open up.
Any ideas why?
Thanks,Peter
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
You also have the bootstrap hide class included..
<div id="popupEventForm" class="modal hide" style="display: none;">
Change your js to this:
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show().removeClass('hide');
$('#eventTitle').focus();
}
You need to remove the "hide" class from the modal. As well as you can use .modal('show') to open the modal
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').removeClass('hide');
$('#popupEventForm').modal('show');
$('#eventTitle').focus();
}
Instead of using style "display:none" use $('#popupEventForm').hide();
and $('#popupEventForm').show();
Or you can use $('#popupEventForm').attr("display","block").
I have an HTML look like this
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
I want to hide the next button of last fieldset of every modal dialog appears. Anyone, please suggest me. I am new to jquery and haven't done this kind of thing before. I code to learn and sometimes I fall in problem.
Try this
simple way In CSS code
button {
visibility: hidden
}
to hide btn in last element use "last-child" selector
.modalDialog:last-child .btn.btn-next {
display: none;
}
see fiddle
Rahul css answer is correct but if you gonna use jquery here is the code
$(".modalDialog button:last-child").hide();
The :last-child selector matches every element that is the last child of its parent, so you can select the last form element and hide it using display:none.
You can read more about :last-child here.
Notes: you are using duplicate id (id="outerr") in your HTML, which could make you markup invalid and create some issues, please consider correcting this issue in your real app.
.modalDialog:last-child form {
display: none;
}
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
this should be.
fieldset:last-child .btn.btn-next {
display: none;
}
this is the code which solved my problem.
Can you please take a look at this demo and let me know why I am not able to ONLy remove the .check-wrap classes if exist? what is happening now the .unwrap() is even removing the .well
$("#un-mask").on("click", function() {
if ($("input:checkbox").parent().is('.check-wrap'))
$("input:checkbox").unwrap("<span class='check-wrap'></div>");
});
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<input type="checkbox" />
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
jQuery's .unwrap() method does not accept any arguments. It removes the parent of every matched element. Since your div.well is the parent of the first checkbox input, it is also removed.
One way to fix this would be to wrap the first checkbox input in a tag of some kind just like the others:
$('input:checkbox').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
<span class="check-wrap">
<input type="checkbox" />
</span>
</div>
</div>
<button class="btn btn-default" id="un-mask">Yes</button>
https://api.jquery.com/unwrap/
Can I center the content of div with center-block??
The following example does not work:
<div class="form-group">
<div class="center-block">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/2/
And this one works:
<div class="form-group">
<div>
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success center-block" />
</div>
</div>
http://jsfiddle.net/jd93fL1x/3/
I want two buttons centered, that is why I want the div with the center-block.
The class center-block applies the center to the element itself, not to the content; in this case you can use the class text-center on the container and since the input has the class btn making it inline-block, that will work:
<div class="text-center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
DemoFiddle
Just use text-align:center on the div:
.center-block {
text-align:center;
}
jsFiddle example
(or use the selector .form-group > div instead of .center-block if you're not using that class for anything)
You can use simply put text-align:center
<div class="form-group">
<div style="text-align:center">
<input id="user_registrate" type="submit" value="Registrate" class="btn btn-success" />
</div>
I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).
However, I don't know how to close all the already opened divs when I click on other buttons.
For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.
My relevant HTML
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
My JS:
$(document).ready(function(){
$("#add").click(function(){
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
});
});
Thanks for suggestions and tips.
i guess this is the simplest thing you can do.. hope this helps you..
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
http://jsfiddle.net/alaskaz1864/VtLzB/1/
replace your jquery code with the following code
$(document).ready(function()
{
$("#add").click(function(){
$("#test1").show();
$("#test2,#test3").hide();
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
$("#test1,#test3").hide();
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
$("#test1, #test2").hide();
});
});
You need to add a common class to those elements, to close them all before opening the required one. You can also put data attributes on the buttons to DRY up your code. Try this:
<div id="controls">
<input type="button" class="addBtn" data-rel="#test1" value="Add" id="add" />
<input type="button" class="editBtn" data-rel="#test2" value="Edit" id="edit" />
<input type="button" class="viewBtn" data-rel="#test3" value="View" id="view" />
<input type="button" class="deleteBtn" value="Delete" id="delete" />
</div>
<div id="test1" class="content">test 1</div>
<div id="test2" class="content">test 2</div>
<div id="test3" class="content">test 3</div>
$('#controls input').click(function() {
$('.content').slideUp('fast');
$($(this).data('rel')).slideDown('fast');
});
Example fiddle
Try to use attribute starts with selector to grab the similar elements, hide it after grabbing it then after that do your normal process,
$("#add").click(function(){
$('div[id^=test]').hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$('div[id^=test]').hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$('div[id^=test]').hide();
$("#test3").slideToggle("fast");
});
DEMO
Even simpler,
$('[type=button]:not(#delete)').click(function(){
$('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});
Special Note:
This code does not expect us to change the DOM structure by adding/hardcoding data-attribute.
DEMO
your jquery
$(document).ready(function(){
$("#add").click(function(){
$("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");
});
});
Demo