Using Jquery to override a css style

Using Jquery to override a css style

  

Hi Everyone,


I was trying to use the following code to override a css style class currently on the accordion widget.

 

For example, when the page loads I want to keep Section 1 open while Section 2 and 3 are closed.  However, that behavior is not reflected on the screen.


Any thoughts would be appreciated. 


AccordionVertical_item open (div class I wanted to apply) 

Section 1 block is the accordion item.


"<script>
$(document).ready(function(){
    $('Section1block.Id').click(function(){
        $('Section1block.Id').addClass('AccordionVertical_item open');
    });
});
</script>"

Hello Omar,

You probably are better adopting a different approach.
See here for reference on how to achieve what you want.

https://www.outsystems.com/forums/discussion/16169/silkuiaccordion-show-first-accordion-item-when-page-loads/

Cheers.

Eduardo Jauch wrote:

Hello Omar,

You probably are better adopting a different approach.
See here for reference on how to achieve what you want.

https://www.outsystems.com/forums/discussion/16169/silkuiaccordion-show-first-accordion-item-when-page-loads/

Cheers.

Hi Eduardo,


I have seen this solutions. However, the problem is that when i run that jquery function it is not present in the code.


I have radio buttons that control my page. I want the section 1 item to open if they select they select the radio buttons.


If you want to control the sections only by the radio buttons, it is easier to just use a section inside an IF and a condition that is dependent of the selected  radio button.

Expandable Sections and Accordions are better suited for when you want to let the user decide what he wants to see...