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>

transformation repeater

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")) ? "" : "" + Eval("Name") + "" %>

It should look like this:

<%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "" + Eval<string>("Name") + "" %>

The second issue is you're missing a closing parenthesis after the  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"), "", "" + Eval<string>("Name") + "") %>

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

L Younkins answered on December 1, 2020 00:15 (last edited on December 1, 2020 00:55)

I have another question, if you can help. The above is working, however, I added a show/hide script and need unique IDs. This is a list, written in a transformation. How can I get it to automatically change the ID with each instance?

Using this script:

Code  
<script>
  function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
    if ( caption == "Read more" ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "Read less";
    } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = "Read more";
    }
}
</script>
<html>
<span id="1" style="display:none">
<p>questions and answers are here.</p></span>
<a onclick="showMoreOrLess(this,'1');">Read more</a>
</html>

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 1, 2020 18:22

Where is the above javascipt code, in the transformation?

In your transformation code you can use either of the following:

<%# Eval("DocumentID") %> this is a unique primary key integer for every page. Your numbers could be 2, 248, 9743 and 44 all depending on the value in that DocumentID field.
or
<%# DataItemIndex %> this is a zero based index based on how many items are in the dataset. For instance, if you have 10 items being returned, you'll get numbers 0 - 9 in your numbering schema.

0 votesVote for this answer Mark as a Correct answer