question and answer page problem

Go to solution

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

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 139 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 139 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 139 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...

Please Sign in or register to post replies