Board styling - Detailed view

Open the list.html and use the Save As editor menu to create a view.html. Paste the following code below the div id="content-categories" element in #content of the view.html. (Do not delete the existing code that shows the list)

<div class="view-menu" style="margin-top: 15px;margin-bottom: 5px;">
  <div class="fl">
    <input type="button" value="Modify" />
    <input type="button" value="Del" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" />
    <input type="button" value="Prev Article" />
    <input type="button" value="List" />
    <input type="button" value="New" />
  </div>
</div>
<table class="bbs-table">
<tr>
  <th style="width: 47px;text-align: left;vertical-align: top;font-size: 1em;">TITLE</th>
  <th style="text-align: left;color: #555;font-size: 1em;">What makes us happy?</th>
</tr>
</table>
<div id="detail">
  <div id="date-writer-hit">2014 10-09 17:50:30 by John hit 1330</div>
  <div id="article-content">
  What makes us happy?What makes us happy?What makes us happy?<br />
  What makes us happy?What makes us happy?What makes us happy?<br />
  </div>
    <div id="file-list" style="text-align: right;">
    <div class="attach-file">
      <a href="#" title="filename" class="download">TEST.png</a>
      <a href="#" title="filekey">Del</a>
    </div>
  </div>
</div>
<!--  New Comment -->
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post">
  <div id="addComment">
    <textarea id="addComment-ta" name="memo" rows="7" cols="50"></textarea>
  </div>
  <div style="text-align: right;">
    <input type="submit" value="Submit" />
  </div>
</form>
<!--  Comments start -->
<div class="comments">
  <span class="writer">xman</span>
  <span class="date">2011.12.11 12:14:32</span>
  <span class="modify-del">
    <a href="javascript:modifyCommentToggle('5')">Modify</a>
    | <a href="javascript:deleteComment('5')">Del</a>
  </span>
  <p id="comment5">What makes us happy?</p>
  <form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;">
  <input type="hidden" name="commentNo" value="5" />
  <input type="hidden" name="boardCd" value="smalltalk" />
  <input type="hidden" name="articleNo" value="12" />
  <input type="hidden" name="curPage" value="1" />
  <input type="hidden" name="searchWord" value="happy" />
  <div class="fr">
    <a href="javascript:document.forms.modifyCommentForm5.submit()">Submit</a>
    | <a href="javascript:modifyCommentToggle('5')">Cancel</a>
  </div>
  <div>
    <textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?</textarea>
  </div>
  </form>
</div>
<!--  Comments end -->
<div id="next-prev">
  <p>Next Article : <a href="#">What makes us happy?</a></p>
  <p>Prev Article : <a href="#">What makes us happy?</a></p>
</div>
<div class="view-menu" style="margin-bottom: 47px;">
  <div class="fl">
    <input type="button" value="Modify" />
    <input type="button" value="Del" />
  </div>
  <div class="fr">
    <input type="button" value="Next Article" />
    <input type="button" value="Prev Article" />
    <input type="button" value="List" />
    <input type="button" value="New" />
  </div>
</div>

In comment5 and modifyCommentForm5, 5 is the comment number. We should give this number programmatically.

bbs-view-01

JavaScript toggle function for modifying comments

Create a working JavaScript function by clicking on the Modify link. If you click on the Modify link, a modification form containing the text area should appear. (modification form is not visible at first)

Paste the following JavaScript code before </ head>:

<script type="text/javascript">
function modifyCommentToggle(articleNo) {
  var p_id = "comment" + articleNo;
  var p = document.getElementById(p_id);
    
  var form_id = "modifyCommentForm" + articleNo;
  var form = document.getElementById(form_id);
    
  var p_display;
  var form_display;
    
  if (p.style.display) {
    p_display = '';
    form_display = 'none';
  } else {
    p_display = 'none';
    form_display = '';
  }
  p.style.display = p_display;
  form.style.display = form_display;
}
</script>

Click the Modify and Cancel links to make sure the JavaScript function is working correctly.

Comment modify link

Comment modify link click

Modify and Cancel links work the same way. If you click these links when the modify form is visible, the modify form disappears. If you click the same link when the modification form is not visible, the modification form appears. The p element works the opposite. This feature is called a toggle.