question and answer page problem

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

abr 5 posts 35 karma points

Oct 23, 2013 @ 15:19

Question and Answer page problem

Hi all

I'm working on a project right now where i have some problems, because i have this code

    <h3 class="qhead"><a href="#q06">Hvordan ansøger jeg om at blive elev?</a></h3>
    <div class="answer" id="q06">
        <p>Du sender en skriftlig ansøgning sammen med dine relevante eksamenspapirer og dit CV til den revisionsvirksomhed, du ønsker ansættelse hos.</p>
    </div>

And this jQuery Script

    <script type="text/javascript">
    $(document).ready(function () {
        $(".qhead a").on("click", function (e) {
            e.preventDefault();
            var href = $(this).attr("href");

            $(href).fadeToggle(500);
        });
    });
</script>

How do i get this into Umbraco??

I tried with this script

    @inherits umbraco.MacroEngines.DynamicNodeContext


@{
    @*Make Query to find all nodes with Alias "QandAAnswer" *@
    var selection = Model.AncestorOrSelf().Descendants("QandAAnswer").Where("Visible");
}

@if(selection.Any()){

    @* OrderBy() takes the property to sort by and optinoally order desc/asc *@
    foreach (var page in selection.OrderBy("CreateDate desc"))
    {
                <h3 class="qhead"><a href="#q,@page.Id">@page.Name</a></h3>
        <div class="answer" id="#q,@page.Id">
            <p>@page.bodyText</p>
        </div>
    }
}

But it's not working it will not fade in and out when i click on the title

I have jQuery on the template.

Copy Link

Nikola Romcevic 26 posts 138 karma points

Oct 24, 2013 @ 16:22
0
This part: var href = $(this).attr("href"); is only saving the href-attribute of the link . So you are trying to apply fadeToggle to a string.

Try applying the fadeToggle() on the a-tag itself: $(this).fadeToggle(500);

Your script should look like this:
```
    $(document).ready(function () {
        $(".qhead a").on("click", function (e) {
            e.preventDefault();

            $(this).fadeToggle(500);
        });
    });
```
Copy Link
abr 5 posts 35 karma points

Oct 28, 2013 @ 14:37

0

Hmm can't get it to work.. :(

Now it's fading out but it will not display the @page.bodyText :(

Copy Link
Nikola Romcevic 26 posts 138 karma points

Oct 28, 2013 @ 15:49

0

Oh..wait. I just realized what you want to do. I got it all wrong, sorry.

Your problem is the "," in the href and id: <a href="#q,@page.Id">@page.Name</a>, <div class="answer" id="#q,@page.Id">

If you want it to look like in your example then use "#[email protected]"

Apparently "." and "," don't work well in ids if you don't escape them first.

Copy Link
abr 5 posts 35 karma points

Oct 28, 2013 @ 16:11

0

Hmm now it doesn't show any ID in the URL, now its just "http://domain.nu/spoergsmaal.aspx#[email protected]", so that's why i but the "," inside because it did show.

Copy Link
Nikola Romcevic 26 posts 138 karma points

Oct 29, 2013 @ 09:24
100
Aha. Try using a "-" instead of a comma: id="#[email protected]"

or, if you don't want any extra character, create a variable in your for-loop var questionId = "q" + page.Id; and use it instead:
```
foreach (var page in selection.OrderBy("CreateDate desc")) {
    var questionId = "q" + page.Id;

    <h3 class="qhead"><a href="#@questionId">@page.Name</a></h3>
    <div class="answer" id="@questionId">
        <p>@page.bodyText</p>
    </div>
}
```
Copy Link
abr 5 posts 35 karma points

Nov 04, 2013 @ 14:28
0
Okay, now it displays the id, i used this
```
foreach (var page in selection.OrderBy("CreateDate desc")) {
var questionId = "q" + page.Id;

<h3 class="qhead"><a href="#@questionId">@page.Name</a></h3>
<div class="answer" id="@questionId">
    <p>@page.bodyText</p>
</div>
```
}

But it still only fades the title out, and does not display the bodytext :/

If it's to any help im trying to convert this into a dynamic one

http://spyrestudios.com/code-a-dynamic-questions-answers-faq-page-with-jquery/
Copy Link
abr 5 posts 35 karma points

Nov 04, 2013 @ 14:31
0
It works now!

It was my jQuery that was wrong..
```
$(document).ready(function(){
```
$(".qhead a").on("click", function(e){ e.preventDefault(); var href = $(this).attr("href");
```
$(href).fadeToggle(450);
```
}); });

That worked! :D
Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies