This is probably a simple task for you Jquery Guru's but I am really battling to do this.
I have two links and I want them to hide and show two forms.
Initially both forms must be hidden, and when you click on button 1 it must show form 1 and when you click the same button again, it must hide form 1. However if Form 1 is shown, and you click on BTN 2 it must hide Form 1 and show Form 2 and similarly if Form 2 is shown, and you click on BTN 2 again it must hide Form 2.
Sort of like Toggling between the two forms but being able to also hide the other form is if it visible.
This is as far as I have gotten. But it is not working like I want, and moreover it seems to be conflicting with the scripts on Bootstrap 4.
$(document).ready(function() {
$("#btn1").click(function() {
$("#form1").toggle(300);
$("#form2").hide(300);
});
$("#btn2").click(function() {
$("#form2").toggle(300);
$("#form1").hide(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Btn 1
Btn 2
<div id="form1" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 1</h4>
</div>
</div>
<div id="form2" style="display: none;">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Form 2</h4>
</div>
</div>
I also tried this. This works by changing between the forms, but if a form is opened, clicking the same button doesnt close (toggle) the form. By the way, this script works in Bootstrap 4.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>
Simply change the css() function to toggle() function. css() function will not toggle.
$("#leather").click(function() {
var id = $(this).attr("id");
$("#pages div#gumboots").css("display", "none");
$("#pages #" + id + "").toggle();
});
$("#gumboots").click(function() {
var id = $(this).attr("id");
$("#pages div#leather").css("display", "none");
$("#pages #" + id + "").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="leather">leather</button>
<button type="button" id="gumboots">gumboots</button>
<div id="pages">
<div id="leather" class="mydivshow" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Leather</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
<div id="gumboots" class="mydivhide" style="display: none;">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Advanced Search Gumboots</h4>
</div>
<!-- Colours -->
<div class="col-lg-12">
<h4>Colours</h4>
</div>
</div>
</div>
</div>
Related
When i clicked on ADD Button, it's appearing the text in the bellow but it's appearing the same column. here is 2 input field.
i have used : <input id="accordion_input" type="text"/>
another one is : <div id="accordion_body" class="panel-body"></div>
So i want, if i fill-up the input and div area & clicked ADD button then i should be appear and second time if i clicked on add button then it's should be CLONE the First input data. The data must be showing on different column every clone part, not in the same column! Like the below snapshot:
$(document).ready(function() {
$('#Add_btn').click(function() {
$('#accordion_body').append($('#editableDiv').html());
var x = $("#accordion_input").val();
$("#accordion_title").append(x);
});
});
<html>
<head>
<title>404</title>
</head>
<body>
<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div><br/>
<div id="acc_main" contenteditable="false" class="accordion-main">
<div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" style="display: block"></a>
</h4>
<div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="display: block">
<div id="accordion_body" class="panel-body"></div>
</div>
</br>
</div>
</div>
</div>
</div>
<button id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Wrap the content in a <p> tag or insert a <br/> after each one.
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
On my code I have a area where I can preview any code as I am typing. The problem I am having is when I select some text and then click on button either bold, italic, pre. The preview area does not display same code straight away.
Question How can I make sure that the preview area when I select some text and then click on a button then it will display correct code below straight away. At the moment just displays plain text.
Live Example
Codepen Code View
Codepen Full View
Script
<script type="text/javascript">
$('#code_view').on('click', function(e) {
var code = $('#editable').clone();
$('#preview').html(code);
});
$('#editable').keyup(function(){
$('#code_view').trigger('click');
});
$('#editable').each(function(){
this.contentEditable = true;
});
</script>
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Title" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-wmd">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<button id="bold" class="btn btn-default">B</button>
<button id="italic" class="btn btn-default"><i>I</i></button>
<button id="pre" class="btn btn-default">{}</button>
<button id="code_view" class="btn btn-default">Code View</button>
</div>
<div class="pull-right">
</div>
</div>
</div>
<div class="panel-body">
<div id="editable"></div>
</div><!-- .panel-body -->
</div><!-- .panel -->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div id="preview"></div>
</div>
</div>
</div><!-- .container -->
Seeing at the code you have done everything right. For achieving the result instantly on click of the button you need to call the code_view click function on the functionality buttons.
Updated code:
Code Pen
Hope this helps you.
-Help :)
To scroll to an element in my Bootstrap modal, I can check the offset of the element. There are for instance 8 div's, each with their own id (#row-1, #row-2, etc.). If I open the modal and then input the following into the console, I get the correct offset value.
$('#row-6').offset()['top'];
But when I console.log this into the code itself, after opening the modal with .modal('show'), I get 0 back.
How can this difference occur? I tried all the solutions I could find on here, but all solutions gave me the same 0.
My problem would also be solved if I could scroll to the element in any other way with JavaScript.
You must wait for the modal to be shown:
// The modal is shown
$('#yourModal').on('shown.bs.modal', function() {
// Get the right offset
var offset = $("#yourelement").offset();
var offsetTop = offset.top;
var offsetLeft = offset.left;
});
My guess would be that the elements are not done being shown yet in order to give you the correct value? Try using a setTimeout to verify this:
setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);
You said:
My problem would also be solved if I could scroll to the element in
any other way with javascript.
So, here is my suggestion to your problem:
html:
<button id="modal_show" class="btn btn-warning">Show modal</button>
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;">
<div class="modal-dialog">
<div class="modal-content" style="padding:5px;">
<div class="modal-body">
<div class="row" id="row1">
<div class="col-xs-12">
<p>
This is row 1
</p>
</div>
</div>
<div class="row" id="row2">
<div class="col-xs-12">
<p>
This is row 2
</p>
</div>
</div>
<div class="row" id="row3">
<div class="col-xs-12">
<p>
This is row 3
</p>
</div>
</div>
<div class="row" id="row4">
<div class="col-xs-12">
<p>
This is row 4
</p>
</div>
</div>
<div class="row" id="row5">
<div class="col-xs-12">
<p>
This is row 5
</p>
</div>
</div>
<div class="row" id="row6">
<div class="col-xs-12">
<p>
This is row 6
</p>
</div>
</div>
<div class="row" id="row7">
<div class="col-xs-6">
<p>
This is row 7
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="3">Go To 3</span>
</p>
</div>
</div>
<div class="row" id="row8">
<div class="col-xs-6">
<p>
This is row 8
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="2">Go To 2</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 pull-right">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery:
$('#modal_show').on('click', function(){
$('#myModal').modal({show: true});
});
$('.scroller').click(function(){
var targetId = $(this).attr("data-to");
$('#myModal').animate({
scrollTop: $("#row"+targetId).position().top
}, 1000);
});
and some css:
.row {
min-height:100px;
}
.scroller {
cursor:pointer;
text-decoration:underline;
}
When you scroll down to div's 7 and 8, you will notice links that scroll you up to div #3 and #2 respectively.
working fiddle: http://jsfiddle.net/xL9at8sc/
Hope that helps you and others...
I was tried to add forms using jQuery and it succeeded.
This time I'm trying to show and hide some buttons(#remove_form, #add_form)
but always not working:(
my jQuery codes(referred this question's answer):
$(document).ready(function(){
var index_num = 1;
var max_num = 7;
$("#add_form").click(function(e){
e.preventDefault();
if(index_num < max_num){
index_num++;
$("#event").each(function(){
$(this).clone().insertAfter(this).attr("id","event" + index_num);
$("#add_form" + index_num).css("display","none");
$("#remove_form" + index_num).css("display","inline");
});
}
});
$("#remove_form" + index_num).click(function(e){
e.preventDefault(); $(this).parent(".row collapse").remove(); index_num--;
});
});
+) I did not wrote "#add_form" button's css code. just this:
#remove_form{
display: none;
}
HTML codes:
<div class="row collapse" id="event">
<div class="small-2 large-2 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
+) HTML codes after clicking '#add_form' button:
<div class="row collapse" id="event">...</div>
<div class="row collapse" id="event7">...</div>
<div class="row collapse" id="event6">...</div>
<div class="row collapse" id="event5">...</div>
<div class="row collapse" id="event4">...</div>
<div class="row collapse" id="event3">...</div>
<div class="row collapse" id="event2">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
How can I solve this problem?
You have to use the id attribute only when you know your item is unique.
If you have multiple id="event" then you need to use class="event" instead and $(".event").each instead of $("#event").each.
If my assumptions are correct, you are trying to make a copy of event form when you click on #add_form button. Then, it's advised to provide a remove button inside the #event form so that every clone has his own remove button and a single add button outside of the #event element.
If you put it that way it's not about Show/Hide rather Add/Remove DOM elements.
<div id="to_clone" style="display:none">
<div class="row collapse" class="event">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" class="remove_form"></button>
</div>
</div>
</div>
<div id="events_container">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
Jquery
$('#add_form').click(function(){
event=$("#to_clone").html();
$(this).before(event);
});
$(document).on('click', '.remove_form', function(){
$(this).closest(".event").remove();
return false;
});
In case you're wondering how to submit those forms you can add a function that translate inputs into json.
function getEventsJson()
{
var json='[';
$('.event').each(function()
{
json=json+'{ "field1": "'+$(this).find('.field1class').val()+'","field2": "'+$(this).find('.field2class').val()+'"},';
});
json=json.replace(/,\s*$/, "");
json=json+']'
return json;
}
Or provide for each event it's own form and submit them one by one.
$('.event').each(function()
{
var form=$(this).find('form');
$.ajax({
type:"POST",
url: "/events",
data: {
'event' : form.serialize(),
},
dataType: 'json',
success: function(data) {
},
error: function(data){
}
});
}