Show/Hide divs, "one by one" and "all at once" - javascript

I'm using this to show/hide some divs, at the end I have a button to show the divs one by one.
How can I have a second button to show/hide all of them at once without messing too much with the HTML?
Basically each div contains an input field, so the user clicks the "Add one more" button to get an extra field. By default, all fields are hidden so I need a button to show them all at once (I have 14 divs to show/hide).
Any help will be appreciated.
Javascript
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
HTML
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">

Here's the basic functionality, though it needs some refinement:
var d = document,
table = d.getElementsByTagName('table')[0],
divs = table.getElementsByTagName('div'),
toggle = d.getElementById('toggleButton'),
allToggle = d.getElementById('allToggle'),
count = 0;
function toggles(){
var elem = divs[count];
elem.style.display = 'block';
count++;
}
toggle.onclick = function(){
toggles();
};
allToggle.onclick = function(){
if (allToggle.getAttribute('data-show') == 1){
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'none';
allToggle.setAttribute('data-show',0);
allToggle.value = 'Show all';
}
}
else {
for(var i=0,len=divs.length;i<len;i++){
divs[i].style.display = 'block';
allToggle.setAttribute('data-show',1);
allToggle.value = 'Hide all';
}
}
}
​
JS Fiddle demo.
The above based on the following HTML:
<table>
<tr>
<td style="width: 150px;">
<div id="box1" style="display: none;">First</div>
</td>
<td style="width: 150px;">
<div id="box2" style="display: none;">Second</div>
</td>
<td style="width: 150px;">
<div id="box3" style="display: none;">Third</div>
</td>
</tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​

have a button with a function that selects all of the divs by a class (that you'll have to add) and hides/shows them. If you just want one button you'll have to remember your state, which in the example below I do with a global.
<button id="showhideall">
$(document).ready(function(){
var allshowing = true;
$("#showhideall").click(function(){
alert(allshowing);
if(allshowing){
$(".foo").hide();
allshowing=false;
} else {
$(".foo").show();
}
});
}​);​

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
function toggle3(contentDiv) {
if (contentDiv.constructor == Array) {
for(i=0; i < contentDiv.length; i++) {
toggle2(contentDiv[i]);
}
}
else {
toggle2(contentDiv);
}
}
function toggle2(showHideDiv) {
var ele = document.getElementById(showHideDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
<input id="toggleButton" type="button" value="Show me the money!" onclick="counter++; toggle4('box');">
<input type="button" value="Press me to toggle all 3 DIVs" onClick="toggle3(['box1', 'box2', 'box3']);">

Related

Why does HTML say that my variable is not defined?

When I try to use the variable, it says it's not defined (error: "ReferenceError: hufc1 is not defined
at HTMLInputElement.onclick", this worked in my old code but not anymore. The code below is the full code to tell you what im trying to do.
<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="https://docs.google.com/document/d/1wZ9WVpkJAjdYVIyGEhgRBaEHulVKetOol17tizUVyLM/edit?usp=sharing" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">PASSWORD:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(text1.value,"Harrison",dasnk2.value,"88888888a") onclick=javascript:validate(text1.value,"Isaac",dasnk2.value,"IsABitch") onclick=javascript:validate(text1.value,"Adam",dasnk2.value,"faa222014") onclick=javascript:validate(text1.value,"Kelvin",dasnk2.value,"six921six921") >
<script>
function validate(text1,dasnk2,text3,text4) {
if (text1 === dasnk2 && text3 === text4) {
var redirect = document.getElementById('redirect');
var embed = document.getElementById("embed");
redirect.style.display = "block";
embed.style.display = "none";
setTimeout(function() {
embed.style.display = "block";
redirect.style.display = "none";
loginuser.style.display = "none";
loginpass.style.display = "none";
login.style.display = "none";
}, 5000);
} else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>```
If you want to keep your solution, you can pass value of input tag as parameter to function like below
onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch")
function validate(text1,dasnk2,text3,text4) {
if (text1 === dasnk2 && text3 === text4) {
var redirect = document.getElementById('redirect');
var embed = document.getElementById("embed");
redirect.style.display = "block";
embed.style.display = "none";
setTimeout(function() {
embed.style.display = "block";
redirect.style.display = "none";
loginuser.style.display = "none";
loginpass.style.display = "none";
login.style.display = "none";
}, 5000);
} else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">PASSWORD:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Harrison",document.getElementsByName("dasnk2")[0].value,"88888888a") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Adam",document.getElementsByName("dasnk2")[0].value,"faa222014") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Kelvin",document.getElementsByName("dasnk2")[0].value,"six921six921") >
You can not get text1.value and dasnk2.value inline. You need move to a javascript function like below.
function validate(){
var name = document.getElementsByName("text1")[0].value;
var pass = document.getElementsByName("dasnk2")[0].value;
if((name == "test" && pass == "test") || (name == "test1" && pass == "test1") || (name == "test2" && pass == "test2") || (name == "test3" && pass == "test3")){
alert('Valid');
}else{
alert('Invalid');
}
}
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">Password:
<input type="password" name="dasnk2">
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit"
onclick="validate()">

Make a div invisible in JavaScript after confirmation

I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.
My code is here
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>
JavaScript
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else return false;
}
function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
document.getElementById('mainDiv').style.display = "none";
}
}
<div id="mainDiv">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
<input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
<div id="nameDiv"></div>
According to a similar question posted before there is no way to
change the confirm dialogs button.
I would suggest you can use bootstrap modal or jQueryUI.
There is even a workaround in the jQueryUI for this.
Or you can use bootstrap Modal. Here is the link for it
I hope my suggestions help with your problem.
You can do this
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else {
document.getElementById('Mydiv').style.display = 'none';
return false;
}
}
You can do like this also:
function confirm_hide(ele){
if(confirm('Do you wish to hide?')){
document.getElementById('Mydiv').style.display = 'block';
document.getElementById('mainDiv').style.display = 'none';
}
}
<div id="Mydiv" style="display:none;" >Haiii</div>
<div id="mainDiv">
<input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/>
</div>
HTML
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">
JS
var div = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");
button.addEventListener('click',confirm_hide());
function confirm_hide(){
var hide = confirm('Do you wish to hide?');
if(hide == true){
button.style.display = 'none';
div.style.display = 'block';
}
else{
button.style.display = 'block';
div.style.display = 'none';
}
}

Displaying a name using Javascript

Am new to javascript and doing my student project. I have created a sample page where user enters the name of a place..
He can enter a maximum of 4 places.. I Just like to have a text of "Place A" on the top when user is entering 1st place and when he clicks on "Add Another Place" then "Place B" needs to be displayed to enter text and same like "Place C" and "Place D".
Here is my code
var i = 0;
function isNumericKey(e) {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function add() {
var a = document.getElementById("ad").value;
// alert('Please Enter Details');
if (a != 'null' || a != '') {
i++;
if (i == 1) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
document.getElementById("Place2").required = true;
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "none";
} else if (i == 2) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
document.getElementById("Place3").required = true;
document.getElementById("Place4").style.display = "none";
} else if (i == 3) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("Place4").required = true;
document.getElementById("ad").style.display = "none";
}
}
}
<form action="abc.php" method="post">
<table width="600" ;>
<tr>
<td><font size=4px><label>Place</label></font>
<br>
<br>
</td>
<td>
<input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" required="true" />
<br>
</td>
<td>
<input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
</tr>
<td>
<input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" style="display: block;
height: 25px;
width: 175px;
border-radius: 25px;
background-color: #008CBA;
color: #fff;
border: #008CBA;
cursor: pointer;" />
Let me know how to do this..
There are lots of syntax error in your HTML code, anyways beside that the solution to your problem is quite simple. I have written the following script to acquire the functionality required
<script type="text/javascript">
var i = 1;
function add() {
if (i == 1)
{
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
i++;
}
else if(i==2)
{
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
i++;
}
else if (i == 3) {
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("ad").style.display = "none";
}
}
</script>
And below is my HTML code
<table>
<tr>
<td><label>Place</label></td>
<td><input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20px;height:30px;font-size:14pt;" placeholder="place1"/></td>
<td><input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place2" /></td>
<td><input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place3" /></td>
<td><input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place4" /></td>
</tr>
<tr>
<td><input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" /></td>
</tr>
Something like that ???
var MAX_PLACES = 4;
var currentEditPlace = 0;
function editPlace(index)
{
var places = document.getElementById('places');
var place = places.getElementsByTagName("li")[index];
place.style.display = 'block';
var span = place.getElementsByTagName("span")[0];
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("value", "");
span.appendChild(input)
/** Return key => show next place */
input.onkeydown = function(e) {
/** Validation */
if (this.value != "" && e.keyCode == 13) {
addNewPlace();
}
}
/** Auto focus new input */
input.focus();
}
function addNewPlace() {
if (currentEditPlace+1 < MAX_PLACES) {
currentEditPlace++;
editPlace(currentEditPlace);
}
}
/** Start editing place A */
editPlace(currentEditPlace);
<ul id="places">
<li style="display:none;">Place A: <span></span></li>
<li style="display:none;">Place B: <span></span></li>
<li style="display:none;">Place C: <span></span></li>
<li style="display:none;">Place D: <span></span></li>
</ul>
<input type="button" value="Add new place" onclick="addNewPlace()"/>
you need to add jquery library
<ol></ol>
<button id="btn2">Append list item</button>
try this..
$(document).ready(function(){
$("#btn2").click(function(){
var count_cls = $('.munna').length;
if(count_cls<4)
{
$("ol").append("<li class='munna'>Place "+count_cls+"</li>");
}else
{
alert('max reached');
}
});
});
i have given for li you just change it to button whatever you want
chttK :http://jsfiddle.net/6yLpw9jv/2/

How do I hide a div when another divs are present?

Lately I've been trying to watch/study javascript and got interested in this certain program since I know I'll be able to use it a lot in the future.
I've seen a tutorial on youtube on how to "hide/show" a div so I tweaked it and made it "show/hide" div's and added two more div's. My problem is I wanted to hide other open div's when I want to show a specific one since my code now shows all of the div's regardless of the present ones.
<html>
<head>
<style type="text/css">
#hide_add_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_edit_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_delete_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
</style>
<script type="text/javascript">
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
</script>
</head>
<body>
<table border='1'>
<tr>
<td colspan='3'>
<center>First Name</center>
</td>
</tr>
<td>
<button onclick="toggle_add_fname('hide_add_fname');">Add</button>
</td>
<td>
<button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
</td>
<td>
<button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
</td>
</tr>
</table>
<div id="hide_add_fname">
<form method='POST'>
<center>Add First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Add'>
</center>
</form>
</div>
<div id="hide_edit_fname">
<form method='POST'>
<center>Edit First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Edit'>
</center>
</form>
</div>
<div id="hide_delete_fname">
<form method='POST'>
<center>Delete First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Delete'>
</center>
</form>
</div>
</body>
</html>
try this code
<html>
<head>
<style type="text/css">
#hide_add_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_edit_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
#hide_delete_fname {
padding: 20px;
background: #f0f0f0;
width: 200px;
display: none;
}
</style>
<script type="text/javascript">
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else{
divelement.style.display = 'block';
document.getElementById('hide_edit_fname').style.display='none';
document.getElementById('hide_delete_fname').style.display='none';
}
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else
{
divelement.style.display = 'block';
document.getElementById('hide_add_fname').style.display='none';
document.getElementById('hide_delete_fname').style.display='none';
}
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if (divelement.style.display == 'block')
divelement.style.display = 'none';
else{
divelement.style.display = 'block';
document.getElementById('hide_add_fname').style.display='none';
document.getElementById('hide_edit_fname').style.display='none';
}
}
</script>
</head>
<body>
<table border='1'>
<tr>
<td colspan='3'>
<center>First Name</center>
</td>
</tr>
<td>
<button onclick="toggle_add_fname('hide_add_fname');">Add</button>
</td>
<td>
<button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
</td>
<td>
<button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
</td>
</tr>
</table>
<div id="hide_add_fname">
<form method='POST'>
<center>Add First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Add'>
</center>
</form>
</div>
<div id="hide_edit_fname">
<form method='POST'>
<center>Edit First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Edit'>
</center>
</form>
</div>
<div id="hide_delete_fname">
<form method='POST'>
<center>Delete First Name:</center>
<br>
<center>
<input type='text'></input>
</center>
<br>
<center>
<input type='submit' value='Delete'>
</center>
</form>
</div>
</body>
</html>
I would use jquery for this. Since it'll take roughly few lines of code to achieve something like this. But anyways, here's what you could do.
Add a class called divs to all of your divs. And paste this code at the beginning of each of toggle functions.
var myElements = document.querySelectorAll(".divs");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.display = 'none';
}
You could have the above code in a function and run it at the beginning of your toggle functions, and I recommend you to do this to keep your code cleaner.
Anyways, what I am doing here is hiding every div at the beginning regardless of what was clicked. And then your code will just show the div that needs to be shown. I am not really good at javascript for DOM manipulation. Javascript experts correct me if I am wrong.
EDIT:
I missed the fact that you want to toggle it as well. Here's the updated code.
function hidedivs(){
var myElements = document.querySelectorAll(".divs");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.display = 'none';
}
}
function toggle_add_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_edit_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
function toggle_delete_fname(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none'){
hidedivs();
}
if(divelement.style.display == 'block')
divelement.style.display = 'none';
else
divelement.style.display = 'block';
}
When you need to use the same specific selector more than once, classes are a better choice.
<div id="hide_add_fname" class='fname'>
A flexible way to apply style
var element_list = document.getElementsByClassName(class_name);
for (var i = 0; i < element_list.length; i++) {
element_list[i].style.display = 'none';
}
JSFiddle example
http://jsfiddle.net/83yrf4tx/
More information about IDs and Classes
In CSS what is the difference between "." and "#" when declaring a set of styles?

Show Hide div is successfull but page refresh on click. razor

I am able to show/hide div onclick successfully.
But onclick div display for a second and page get refresh.
I have use javascript.
Code:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide(#Count);" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
If the submit button is inside a <form> you need to return false from the showHide if you don't want the page to get submitted after clicking on it:
<script type="text/javascript">
function showHide(Count) {
var ele = document.getElementById(Count);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false; // <-- that's important to prevent the page from submitting
}
</script>
Also please bear in mind that an id attribute cannot start with a number in HTML. So please fix your markup:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="mydiv_#Count" style="display: none;">
<input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if (ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
return false;
}
</script>
It happens because your page is being submitted. Try using <input type="button"...> instead of <input type="submit"...>
Difference here: Difference between <input type='button' /> and <input type='submit' />
And your controls id can't start with a number and must be unique:
#{var Count = 0;}
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0))
{
<div id="div_#Count" style="display: none;">
<input type="submit" id="reply_#Count" class="reply-link" onclick="return showHide('mydiv_#Count');" value="Reply" />
#{Count++; }
</div>
}

Categories

Resources