Show/Hide within transformation

L Younkins asked on November 19, 2020 17:20

I have created a repeater as the page type, with a transformation for which I need to "show" the fields if the user clicks "Read More" and then hide if the user clicks "Read Less". I know how to do this in html/js, but not quite sure in a transformation. I am new to writing them, but need to do it this way so that other team members can add stories via a form format. Here is what I have written so far. Each area that is in parenthesis is a field in the page type. Can someone look at my code first to see if I wrote it correctly, and also tell me how to create the show/hide as part of it.

Code

  <li>
  <div class="Alumi-stories <%# Eval<string>("CssClass") %>">
    <%# String.IsNullOrEmpty(Eval<string>("Image1")) ? "" : "<img class=\"Image\" alt=\"" + Eval("ImageAlt") + "\" src=\"" + Eval("Image") + "\" />" %>
    <%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval("Name") + "</span>" %>
    <hr class="grn200">
    <%# String.IsNullOrEmpty(Eval<string>("Quote"")) ? "" : "<div class=\"Quote\">" + Eval("Quote") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Attended"")) ? "" : "<div class=\"Attended\">" + Eval("Attended") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Studied"")) ? "" : "<div class=\"Studied\">" + Eval("Studied") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Introduction")) ? "" : "<div class=\"Introduction\">" + Eval("Introduction") + "</div>" %>

    <div class="alumiText <%# Eval<string>("CssClass") %>" onclick="read-more-show(this);">
    <p><a class="read-more-show hide" href="#">Read More</a> <span class="read-more-content"></p>

    <%# String.IsNullOrEmpty(Eval<string>("Question1")) ? "" : "<div class=\"Question1\">" + Eval("Question1") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer1")) ? "" : "<div class=\"Answer1\">" + Eval("Answer1") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question2")) ? "" : "<div class=\"Question2\">" + Eval("Question2") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer2")) ? "" : "<div class=\"Answer2\">" + Eval("Answer2") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question3")) ? "" : "<div class=\"Question3\">" + Eval("Question3") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer3")) ? "" : "<div class=\"Answer3\">" + Eval("Answer3") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question4")) ? "" : "<div class=\"Question4\">" + Eval("Question4") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer4")) ? "" : "<div class=\"Answer4\">" + Eval("Answer4") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question5")) ? "" : "<div class=\"Question5\">" + Eval("Question5") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer5")) ? "" : "<div class=\"Answer5\">" + Eval("Answer5") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question6")) ? "" : "<div class=\"Question6\">" + Eval("Question6") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer6")) ? "" : "<div class=\"Answer6\">" + Eval("Answer6") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question7")) ? "" : "<div class=\"Question7\">" + Eval("Question7") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer7")) ? "" : "<div class=\"Answer7\">" + Eval("Answer7") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question8")) ? "" : "<div class=\"Question8\">" + Eval("Question8") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer8")) ? "" : "<div class=\"Answer8\">" + Eval("Answer8") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question9")) ? "" : "<div class=\"Question9\">" + Eval("Question9") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer9")) ? "" : "<div class=\"Answer9\">" + Eval("Answer9") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question10")) ? "" : "<div class=\"Question10\">" + Eval("Question10") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer10")) ? "" : "<div class=\"Answer10\">" + Eval("Answer10") + "</div>" %>

    <p><a class="read-more-hide hide" href="#">Read Less</a></span></p>
    </div>
</div>
</li>

Correct Answer

Brenden Kehren answered on November 20, 2020 21:40

2 issues I see:

Using this example, you'll want to make sure when you process the Eval("Name") value, it's done as a string since that's what you're concatenating with.

<%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval("Name") + "</span>" %>

It should look like this:

<%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval<string>("Name") + "</span>" %>

The second issue is you're missing a closing parenthesis after the </span> tag.

Last item is you could simplify this a bit with an out of the box transformation method. It could look like this:

<%# IfEmpty(Eval("Name"), "", "<span class='Name'>" + Eval<string>("Name") + "</span>") %>

0 votesVote for this answer Unmark Correct answer

Recent Answers


L Younkins answered on November 25, 2020 20:03

Thank you so much! This worked perfectly.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.