The following should give you a simple accordion. Use the Single Page Application project template and update Client.fs as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
namespace SinglePageApplication1

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQueryUI

[<JavaScript>]
module Client =

    let Main =
        Accordion.New [
            "Tab 1", Div [P [Text "content1"]]
            "Tab 2", Div [P [Text "content2"]]
        ]
        |> fun main ->
            main.AppendTo("placeholder")

This uses a custom placeholder node, so be sure to add that to your index.html, before the generated <script> include, as this:

1
2
3
4
5
<body>
    <div id="placeholder" />
    <script type="text/javascript" src="Content/SinglePageApplication1.min.js"></script>
</body>
...

When you run this SPA, you should see something like this:

Result

Hope this helps.

By on 11/24/2014 6:08 PM ()

... and be sure to add a NuGet reference to WebSharper.JQueryUI to your project (and update WebSharper to the latest, if necessary) to get the IntelliFactory.WebSharper.JQueryUI namespace to show up.

By on 11/24/2014 6:14 PM ()
IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy
Built with WebSharper