HTML bootstrap collapse doesnt working at first button press properly

HTML bootstrap collapse doesnt working at first button press properly - javascript

Can you help me with that bootstrap and javascript collapse please?
I have two collapse cards. The first should card be visible than you click on the link. After the click should show next card and the first should disappear.
It is functional but at the first click there are both cards. Thats fix after the second click. Thank u for your help.
HTML:
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
</div>
<div class="collapse" id="konform">
</div>
</div>
Javascript:
var collapsestate = false;
jQuery('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#konform').collapse('hide');
$('#kontakty').collapse('show');
collapsestate = false;
}
console.log(collapsestate);
});

try with this snippet code... I think this snippet is as per your requirements.
$(document).ready(function(){
var collapsestate = false;
$('#kontakty').collapse('show');
$('#spust').on("click",function(e) {
if (collapsestate == false){
$('#kontakty').collapse('hide');
$('#konform').collapse('show');
collapsestate = true;
}
else{
$('#kontakty').collapse('show');
$('#konform').collapse('hide');
collapsestate = false;
}
console.log(collapsestate);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="card text-center">
<div class="card-header ">
<a class="nav-link" id="spust" href="#">Kontaktní formulář</a>
</div>
<div id="kontakty">
abcd
</div>
<div class="collapse" id="konform">
1234
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

You can add "display:none" to make 'kontakt' invisible before click it:
<div id="kontakty" style="display:none">
</div>

Related

How can i add more options to a select element in html?

i tried to make a select element in html using materialize css library, and when i try to add dynamic options to the select (for example, a list which each element in the list is an option of the select) and i can't find out why its only adding the first element
here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>

It works fine if you initialize formSelect() after calling add_options_to_select();
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
jQuery(document).ready(function($){
add_options_to_select();
$('select').formSelect();
function add_options_to_select(){
for (i = 0; i < 10; i++)
{
$('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
}
});
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id='mySelect'></select>
<label>Assignment</label>
</div>
</div>
</div>
<script>
// $('select').formSelect();
$('.datepicker').datepicker();
</script>
</body>
</html>

toggleClass Each element One By One jQuery

Problem is that I'm using an array that has more than one element. So, on the toggle, the last class gets passed and functionality given for the last element gets integrated and all starting elements were just added but didn't show any functionality.
I need that each element first to show functionality then toggled to another class.
var arrayOfButtonId = [];
$(".buttons-container").click(function (e) {
var clickedItemId;
// if (e.target !== e.currentTarget) {
clickedItemId = e.target.id;
arrayOfButtonId.push(clickedItemId);
console.log(arrayOfButtonId);
var counter = 0;
arrayOfButtonId.forEach((id) => {
console.log(id, counter++);
setTimeout(() => {
$(".sample-display").toggleClass(id,);
}, 4000);
});
});
For this, In HTML I have Various buttons which can pass the value to js . So that value gets added one by one with some time delay till one function shows its work properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample HTML</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
</head>
<div class="card col-md-6 offset-md-3 shadow text-center animate__animated">
THis is for Sample.
</div>
<div
class="
container-fluid
buttons-container
col-md-3
alert-primary
text-dark
rounded
"
>
<!-- Animation for Attention Makers -->
<div class="card col-md-12 my-md-2 py-md-2">
<span class="text-capitalize font-weight-bold text-center"
>Attention Maker</span
>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Flash"
id="animate__flash"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Bounce"
id="animate__bounce"
/>
<input
type="button"
class="btn btn-outline-danger offset-md-1 col-md-10 m-md-3"
value="Tada"
id="animate__tada"
/>
</div>
</div>
<!-- script Start-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- script End-->
<script src="./js/main.js"></script>
<body></body>
</html>

My code of javascript Show and hide does not work?

I am doing a task of shwoing and hiding container1 of confused why my code does not work
My task is :
to click on button of show (will display container1)
And button of hide (Hiding the container1)
this is the html
function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button oneclick="Show()">Hide London</button>
<button oneclick="Hide()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>

You have typo it should be onclick not oneclick.
function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button onclick="Hide()">Hide London</button>
<button onclick="Show()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

CSS and JS are not working on live server while I transfer to there

I created a coming soon page for my new portfolio domain, on a local server. When I'm trying to transfer it to my hosting panel on public html, just HTML file are showing but CSS and JS files are not getting included, and they are not working properly.
What do I need to change there for using on live server ?
I uploaded all folders, img, js, css and files.
Here is a link for live preview (Dropbox): Coming_soon_template
Here is my code for local server:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This site is in under construction</title>
<meta name="description" content="This site for now is in under construction will be live after some days.For more you can knock me on there lover.mahabub#gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com /css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="include/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TimeCircles.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="coming-soon-total">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-text">
<span>A creation of Mahbub Rahman**</span>
<h1>Wait for difference!</h1>
<p>Long way to go just keep patience.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="example" data-date="2015-12-23 00:00:00"> </div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social-area">
<p> Get in touch</p>
<ul class="social-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Skype</li>
<li>whatsapp</li>
<li>gplus</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/TimeCircles.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$(".example").TimeCircles({
start: true,
time: {
Days: {color: "#4A616E"},
Hours: {color: "#5E524A"},
Minutes: {color: "#2E2F2A"},
Seconds: {color: "#9BA7B5"}
},
circle_bg_color: "#7F8382",
bg_width: .8,
});
});
</script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

HTML bootstrap collapse doesnt working at first button press properly - javascript

You can add "display:none" to make 'kontakt' invisible before click it: <div id="kontakty" style="display:none"> </div>

Related

How can i add more options to a select element in html?

toggleClass Each element One By One jQuery

My code of javascript Show and hide does not work?

How to use Bootstrap Icon Picker in Jquery

CSS and JS are not working on live server while I transfer to there

Categories

Resources