I would like to use a user control with slide toggle on the same page several times. But, all three don't work the same way. If I add a user control to the page, everything works fine but if I insert two of them, they don't work correctly. Below is my code.
$(document).ready(function () {
$('#button').click(function (e) {
$('#list').slideToggle();
});
});.button {
width: 200px;
background: #23997a;
height: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
color: white;
}
.list {
width: 200px;
background: #6bceb4;
display: none;
}
.buttonList {
border: none;
color: white;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.00);
outline: none;
}
#list ul {
margin: 0;
padding: 0;
line-height: 180%
}
.list ul li:hover {
background: #ff0000
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button" class="button">
</div>
<div id="list" class="list">
<ul>
<li id="li1">
<input type="button" value="Coffee" class="buttonList" />
</li>
<li id="li2">
<input type="button" value="Milk" class="buttonList" />
</li>
<li id="li3">
<input type="button" value="Juice" class="buttonList" />
</li>
</ul>
</div>If I add two or more of this user controls to the page, it doesn't work properly. What should I do to make this correct?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Custom_Control_Asp.WebForm1" %>
<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
<uc1:WebUserControl1 runat="server" ID="WebUserControl2" />
</div>
</form>
</body>
</html>
Thanks in advance!