CODEWITHSUNDEEP
jquerytelerik
codecompleting
codecompleting

Reputation: 9611

Toggling a div doesn't display inside a radpane

I have a radpanel, and inside there I have a div with some data in it, with the default display set to none.

I have a button, when clicked, I wired up a click event so it then sets the element to visible using toggle.

I set the CSS for the div to have a z-index of: 9999

When I click the icon, the event fires (I added an alert to make sure), yet the div content is not visible.

How can this be when I a setting the z-index to be so high?

<div id="test1" style="display:none">
...
</div>

$("#mybutton").bind("click", function(e){
  e.preventDefault();

  $("#test1").toggle();
});

UPDATE

The div is visible when the button is clicked if inside a radpane, but when outside a radpanel it isn't visible.

Upvotes: 0

Views: 462

Answers (3)

rdmptn
rdmptn

Reputation: 5603

The RadSplitter should have more than one RadPane inside, as its purpose is to separate the layout in more than one.

Also you need to make sure that all your content is inside a RadPane or RadSlidingPane, as other content should not be placed directly inside the main RadSplitter tag. If it is, the most common result is that it will not be rendered, as the RadSplitter will ignore it. Or an error will be thrown.

As for the div being the first element in the RadPane - simply declare it first:

    <telerik:RadPane runat="server" id="RadPane1">
        <div id="test1" style="display:none">this is the test</div>
        other content
    </telerik:RadPane>

You can also use the RadPane's Scrolling property and set it to none if you do not want to have scrollbars.

Another option is to resize the splitter according to its content when you show the div (an example on resizing can be found in this KB from Telerik) via its client-side API.

Upvotes: 0

CF-Slayer
CF-Slayer

Reputation: 169

How about:

$("#mybutton").click(function () {
    $("test1").show();
});

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Try: $("#test1").toggle(); -- you need to specify "#" with an ID, otherwise jQuery thinks it is a tag name.

Upvotes: 2

Related Questions