Skip to content

Instantly share code, notes, and snippets.

@suman-ganta

suman-ganta/accordian.html

Created June 7, 2013 20:58
Show Gist options
  • Save suman-ganta/5732383 to your computer and use it in GitHub Desktop.
Save suman-ganta/5732383 to your computer and use it in GitHub Desktop.
Download ZIP
my first gist
Raw
accordian.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editable accordion</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion();
$('#mybutton').click(function(event){
//this stops event propagation to parent element.
event.stopPropagation();
var content = $('#sec1').text();
$('#sec1').html('<input id="sec11" type="text" name="header1" value="' + content + '">');
});
});
</script>
</head>
<body>
<div id="accordion">
<div>
<h3 id="sec1">Section 1</h3><button type="button" id="mybutton">Edit Header</button>
</div>
<div>
<p>
Detail for section 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>Detail for section 2
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Detail for section 3.
</p>
</div>
<h3>Section 4</h3>
<div>
<p>
Detail for section 4
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment