I have the html code which is in fact a spoiler on the web page.

```
<div data-h="255" class="mainblocks__text moretext text">
    <div class="moretext__block">
        <p>Some loooong text</p>
    </div>
</div>
<div class="moretext__more"></div>

```

The parameter data-h="255" stands for the max-height of the mainblocks\_\_text
The spoiler is handled by JS function which works this way: 
"user click the div *moretext\_\_more* and the spoiled is opened. Click once more and the spoiler is closed. 
As I mentioned before the spoiler height is always 255px (data-h="255")"

Here is the function itself:

```
function moretext(){
    if($('.moretext').length>0){
        $.each($('.moretext'), function(index, val) {
            if($(this).find('.moretext__block').outerHeight()>$(this).data('h')){
                $(this).css('max-height', $(this).data('h')).removeClass('active');
                $(this).parent().find('.moretext__more').show().removeClass('active');
            }else{
                $(this).parent().find('.moretext__more').hide();
            }
        });
    }
}
    moretext();

$('.moretext__more').click(function(){
        $(this).toggleClass('active');
        $(this).parent().find('.moretext').toggleClass('active');
    if($(this).parent().find('.moretext').hasClass('active')){
        $(this).parent().find('.moretext').animate({maxHeight:$(this).parent().find('.moretext__block').outerHeight()},300);
    }else{
        $(this).parent().find('.moretext').animate({maxHeight:$(this).parent().find('.moretext').data('h')},300);
    }
    return false;
});  

```

Everything works fine, however if I have wide screen (2080 \* 1080 for example), 
the spoiler height 255px is in fact too small.
I would like to change the parameter data-h dynamically.
Something like

```
 if ( $(window).width() > 2000 ) {  
            data-h = 455px;  
        }  

```

But I cannot realize how to do it.
Thank you for any good advise.