The content on the pages can be partially displayed by unfolding or closing the remaining content in html/JS through this link (the page already has an unfold or close function in a box). Now, I want to display the partial titles of the contents in the boxes, pictures, and list.html on the page.
The long green words in the red box are the titles of the contents. Each title is too long to read at once, so I want to display them one line for each object, and when the mouse pointer hovers over the text fields, the full text will be displayed.
If I use the code as provided below, the unfold or close function of the box will not work, and hovering over the text fields will not display the full text, only part of it.
https://i.sstatic.net/CGzT9.png
<style type="text/css">
#box1,#box2,#box3,#box4,#box5,#box6{padding:12px;border:0px solid green;}
.collapsed-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expanded-content {
display: block;
}
p{
display:inline-block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
max-width: 100px;
}
p:hover{
overflow:visible;
}
</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
//targetObj.classList.toggle("expanded-content");
targetObj.classList.toggle("collapsed-content");
if(targetObj.classList.contains("collapsed-content")){
sourceObj.innerHTML = oShutTip;
} else {
sourceObj.innerHTML = oOpenTip;
}
}
</script>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-10">
<strong>List of Courses Studied</strong>
</div>
</div>
</div>
<div class="list-group list-group-flush list-group-formset">
<div class="col-10 collapsed-content" id="box3" style="word-break: break-all;">
{% for c in course %}
<p class="hide"><a href="{% url 'supervisors:course_change' c.pk %}">{{ c }}</p></a>
{% endfor %}
</div>
</div>
<div><button onclick="openShutManager(this,'box3',false,'Click to Close','Click to Open')">Click to Open</button></div>
<div class="card-footer">
</div>
</div>