数据列表更多详细信息选项的问题

Question

I've created a datalist of jobs in my project. I'm trying to display just a few details with an option of show more information button. I've tried to do so but no matter which datalist block the user clicks on it always opens information on the first block.(instead of opening in the same block he clicked) Before clicking After clicking

aspx

         <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
           <div class="jobContainer">
              <div class="jobDetails">
                 <span class="jobName"><%# Eval("jobName") %></span><br /> 
                 <hr class="style13">
                 <a class="Details">    <b>Requirments: </b><span ><%# Eval("jobRequirments") %> WPM</span>   </a> 
                 <a class="Details">  <b>Salary: </b><span ><%# Eval("jobSalary")%> Shekel per hour</span>  </a>
                 <a class="Details">   <b>City: </b><span ><%# Eval("jobCity")%></span> <br />  </a>
                 <button id="moreDetailsButton" class="moreDetails" onclick="showDetails()" type="button">More Details</button>
                 <div id="secondDetails">
                    <a class="Details">           <b>Address: </b><span ><%# Eval("jobAddress")%></span>  </a>
                    <a class="Details">          <b>Description: </b><span ><%# Eval("jobDescription")%></span> <br />  </a>
                    <a class="Details">       <b>Contact: </b><span ><%# Eval("jobContact")%></span>  </a>
                    <a class="Details">         <b>Type: </b><span ><%# Eval("jobType")%></span> <br />  </a>
                    <asp:Button ID="Button1" class="moreDetails" runat="server" OnClick="Button1_Click" Text="Send nomination"/>
                 </div>
              </div>
           </div>
        </ItemTemplate>
     </asp:DataList>
     <script src="js/jobs.js" type="text/javascript"></script>

js

function showDetails() {
document.getElementById("moreDetailsButton").style.display = "none";
document.getElementById("secondDetails").style.display = "block";

}

css

.jobDetails {

margin-right: 4vw;
font-size: 20px;
margin-bottom: 1.25vh;

}

.jobName {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 3vh;
}

.jobContainer {
    border: solid 4px #c7aa8b;
    margin-left: 30px;
    padding: 3vh;
    margin-top: 2vh;

}


hr.style13 {
    height: 8px;
    border: 0;
    box-shadow: 0 15px 15px -17px #97611D inset;
    margin-bottom: 2vh;
}

.moreDetails {
    width: 190px;
    background: #c7aa8b;
    font-weight: bold;
    font-size: 20px;
    color: white;
    border: 0 none;
    border-radius: 2px;
    cursor: pointer;
    padding: 15px 5px;
    transition: none;
}

    .moreDetails:hover {
        box-shadow: 0 0 0 2px white, 0 0 0 3px #c7aa8b !important;
        transition: none;
    }

#secondDetails{
    display: none;
}
.Details{
    margin-left: 25px;
}
#moreDetailsButton {
    position: relative;
    margin-top: 3vh;
    margin-left: 40vw;
}

Answer 1

Your DataList ends up with multiple moreDetailsButton so id would not be using as selector. So what you can do is give unique value to id and use that as selector.

Let's say JobName is unique for each row then you can create id by adding JobName to make them unique as following:

<button id='<%# "moreDetailsButton_" + EVAL("JobName") %>' class="moreDetails" onclick='<%# "showDetails(" +Eval("JobName") + " );" %>' type="button">More Details</button>
<div id='<%# "secondDetails_" + EVAL("JobName") %>'>
//..

Your script will be:

function showDetails(jobName) {
    document.getElementById("moreDetailsButton_" + jobName).style.display = "none";
    document.getElementById("secondDetails_" + jobName).style.display = "block";
}