Collapse - accordion first element opened by default - javascript

I am working with Collapse "Accordion". When my page loads the first collapse is open by default, please suggest the way to make it close by default!!
Any help is appreciated. Thanks for help!!
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
<link href="/resources/demos/style.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>
Click Here for answer:)</h3>
<div style color: "red;">
<b>Answer: </b>206 Bones
</div>
</div>
<script>
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>

Please use this.
$("#accordion").accordion({ collapsible: true, active: false });

you have to use this property:
active: false
Follows a work example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
<link href="/resources/demos/style.css" rel="stylesheet"></link>
<div id="accordion">
<h3>
Click Here for answer:)</h3>
<div style color:"red;">
<b>Answer: </b>206 Bones
</div></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
} );
</script>
</body>
</html>

this will do the tricks
$("#accordion").accordion({
collapsible:true,
active: false
});

Related

How to add close bracket and close tag for react code mirror

I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called #codemirror/closebrackets but I can't find any documentation to do that.
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>
This is my react component.
Specify if there is a way to do without additional packages like #codemirror/closebrackets.
You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:
Defines an option autoCloseBrackets that will auto-close brackets and
quotes when typed.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>
This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>

How to register dynamicaly loaded content (e. g. classes)

I have a problem. When i load external data and i will use jquery events on that data - this is not working because the DOM does not know this. The event-delegation works perfect. I only want to know how to make the <div class="dialog"> original </div> loaded from source.txt known to the DOM or another solution to access the external data through the jquery Event. When I use the line div class="dialog"> original </div> in the Main document all works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
iframe{
overflow:hidden;
}
</style>
<script>
$( function() {
$( ".dialog" ).dialog({
autoOpen: false,
width:700,
height:700,
show: {
},
hide: {
}
});
$(document).on("click","#link",function(){
$("#include").load("http://www.damago.de/dev/source.txt");
});
$(document).on( "click","#opener", function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="include"></div>
<a id="link" href="#">Include the source.txt with the code</a>
</body>
</html>
source.txt
<div class="dialog"> original </div>
<button id="opener">This is the text of the dialog</button>

Bootstrap datetimepicker showClose does not work

I am using this datetimepicker. I would like to display the close button, but I cannot the see it on the inline mode. Can anyone please help? Here is my code.
$(function () {
$('#datetimepicker1').datetimepicker({
sideBySide: true,
showClose: true
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<form name="form1" id="form1" style="width :200px;">
<div class='input-group date' id='datetimepicker1' style ="margin :10px;">
<input name="TextBox1" type="text" id="TextBox1" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</form>
</body>
</html>
You can force the toolbar with the close button to display when usingsideBySide by setting toolbarPlacement to "top" or "bottom".
$(function () {
$( "#datetimepicker1" ).datetimepicker({
sideBySide: true,
toolbarPlacement: "bottom",
showClose: true
});
});
Try this :
$(function () {
$('#datetimepicker1').datetimepicker({
showButtonPanel: true,
closeText: "Ok",
onSelect:function(event){
event.preventDefault();
// blah blah blah
}
});
});

why datetimepicker is not working

i am using the following code for datetimepicker but i am unable to understand why it is not working. I mean in the input box nothing is shown. Please help me ?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/i18n/jquery-ui-timepicker-addon-i18n.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
You must add the following too:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
^ Here is the plugin js & css.
And here you will find all the scripts/css files that you need: http://cdnjs.com/libraries/jquery-ui-timepicker-addon

CSS not being applied to page

I have a rather simple page currently, and for some reason the maincss.css isn't being applied, which simply sets the background to an image. I know that it works because it was working before I added another css file for jquery styling. What about this is wrong?
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/maincss.css" rel="stylesheet">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It seems you might face problem because:
In CSS file the image path you have not given properly. (you should be giving a relative path from your CSS file and not to html)
In your new CSS file the body{} tag was overwritten to nothing.
For resolution:
Try checking the CSS by configuring the background-color to some color and test it. So this way you can make sure the CSS is working fine and try other options as well.
Try this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link type="text/css" href="css/maincss.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

Categories