CODEWITHSUNDEEP
jquerycss
Angeline
Angeline

Reputation: 2379

show a div class on clicking a link

How do I show a div class on clicking a link?

This is the div class that must be shown:

<div id="fb_contentarea_col1down1">
    <div class="myform" id="step2">

        <form action="index.html" method="post" name="FieldSetting" id="FieldSetting">
            <label class="topspace">
                Field Label:
            </label>

            <input id="fieldName" name="fieldName"></input>
            <label class="topspace">
                Field Size:
            </label>

            <select id="fieldSize" name="fieldSize">
                <option>Choose a size </option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </select>

            <label class="topspace">
                Options:
            </label>

            <input id='required' name="required" type='checkbox'>Required</input>

            <label class="topspace">
                Instruction for User:
            </label>

<textarea cols="40" id="instructions" name="instructions" rows="20" style="width: 98%; height: 70px;"></textarea>
            <br class="clear_both" />
            <input type="submit" class="button" value="Submit" />

        </form>
    </div><!-- End of myform -->
</div><!-- End of fb_contentarea_col1down1 -->

This div class must be shown when I click any of the links given below:

<div id="fb_contentarea_col1down">
    <ul class="formfield">
        <li class="selected"><a href="#" id="text">Text</a></li>

        <li><a href="#" id="textarea">Textarea</a></li>

        <li><a href="#" id="checkbox">Checkbox</a></li>
    </ul>
</div>

The 'myform' div is shown by default. how to show the same 'myform' div when I click the link for textarea or checkbox?

Upvotes: 1

Views: 1223

Answers (2)

karim79
karim79

Reputation: 342635

EDIT: This should do it:

$('#fb_contentarea_col1down a').click(function() {
    $('#fb_contentarea_col1down1').show();

    //find the element in the div with class of selected and remove
    //all classes from it
    $('#fb_contentarea_col1down').find(".selected").removeClass();

    //add the class to the li parent of the clicked anchor
    $(this).parent().addClass("selected");
});

Upvotes: 2

nightingale2k1
nightingale2k1

Reputation: 10325

okay .. i just completed what karim did :

$('#fb_contentarea_col1down a').click(function() {
    $('#fb_contentarea_col1down1').show();


    // to remove all selected 
    $('.fb_contentarea_col1down li').attr('class',''); // this will reset all class 

    // assign the selected class for this link only 

    var id = $(this).attr('id');
    // set selected on the <li>
    $('#'+id+':parent').attr('class','selected'); 
});

You just need to assign an id on each <a> tags

Upvotes: 0

Related Questions