Question

I have this code in my view

<a href="#SampleEditor" onclick="javaScript:ShowSampleEditor()"
                    id="SampleLink">Add Sample</a>
                <div class="editor-field" id="SampleEditor" style="display: none">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.SampleCollectionInstructions)
                    </div>
                    <div class="editor-field">
                        @Html.TextAreaFor(model => model.SampleCollectionInstructions, new { @class = "adminRichText" })
                        @Html.ValidationMessageFor(model => model.SampleCollectionInstructions)
                    </div>
                </div>

What it does is present the user a link to open a rich text editor and hide the link

This is the code I use

function ShowSampleEditor() {
        $("#SampleEditor").show();
        $("#SampleLink").hide();
    }

And now I have to do this for a couple more editors. Since Json is not really my thing, how can I make a generic function to do this for sevearal editors?

Answer 1

Edit the code to something like the following

 <a href="#SampleEditor" onclick="javaScript:ShowSampleEditor(this)"
                id="SampleLink">Add Sample</a>
            <div class="editor-field" id="SampleEditor" style="display: none">
                <div class="editor-label">
                    @Html.LabelFor(model => model.SampleCollectionInstructions)
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.SampleCollectionInstructions, new { @class = "adminRichText" })
                    @Html.ValidationMessageFor(model => model.SampleCollectionInstructions)
                </div>
            </div>

and javascript to

function ShowSampleEditor(link) {
   $(link).next().show(); // Next element after the link is the panel
   //$(".editor-field").show(); // Use this if the element to show does not immediately follow the link
   $(link).hide();
}

See a demo fiddle at – http://jsfiddle.net/27MeG/8/

I have generalised the javascript function to take the clicked link as a parameter. This link is then being hiddern, and it’s next sibling being shown – which should be the editor.