Within my code, there is a <div> element that has been made clickable. Upon clicking this <div>, the height and text expand using the jQuery function $(div).animate();. While this functionality works as intended, I am encountering a slight issue.
Inside this <div>, there are multiple links that lead to other pages. When one of these links is clicked, the div still animates. If the page load times are slow, the full animation plays out before redirecting to the linked page. This behavior is not desired. Clicking on a link inside the div should bypass the animation since the user will be directed elsewhere. The animation should only trigger when the div itself (not a link within it) is clicked.
Is there a way to achieve this? Could Z-index be used for this purpose?
Below is the structure of the div:
<div class="question-summary collapsed unselectable">
<div class="votes">
<div class="mini-counts">@item.GetTotalVotes()</div>
<div>Votes</div>
</div>
@if (item.Answers.Count == 0)
{
<div class="votes unanswered">
<div class="mini-counts">@Html.DisplayFor(modelItem => item.Answers.Count)</div>
<span>Answers</span>
</div>
}
else
{
<div class="votes answered">
<div class="mini-counts">@Html.DisplayFor(modelItem => item.Answers.Count) </div>
@if (item.Answers.Count == 1)
{
<span>Answer</span>
}
else
{
<span>Answers</span>
}
</div>
}
<div class="summary">
<h3 class="link-ontop">@Html.ActionLink(@item.GeneralQuestion, "Details", new { id = item.QuestionId})</h3>
<p class="extra-info">@item.GetShortExplanation(160) <span class="link-ontop">@Html.ActionLink("Read More...", "Details", new { id = item.QuestionId})</span></p>
<div class="meta-info">
@item.DateSubmitted.ToShortDateString()
@Html.DisplayFor(itemModel => item.Author.FirstName)
</div>
</div>
<div class="tags">
@foreach (var topic in item.Topics)
{
<a href="@Url.Action("IndexByTopic","Question",new { topicId = @topic.TopicId })" class="tag-name">@topic.Name</a>
}
</div>
<div class="no-animate">
<h1>@item.GeneralQuestion</h1>
@Html.DisplayWithBreaks(item.Explanation)
<br />
<br />
<a href="@Url.Action("Details", new { id = item.QuestionId })">This question has @item.Answers.Count answers, click here for details!</a>
</div>
</div>
This setup is implemented in an MVC.NET project, hence the presence of Razor syntax in the html code.