Сообщений в теме: 5

[Steven Vandermeulen]

Hey

 

I would like to make it possible for the user to collapse the search module when needed, with the use of a button.

Maybe somehow wrap the content of the module in a single-panel accordion of some sort?

Does someone now how I could do this? 

 

thx

[Kess]

Hello,

 

Try this, please:

 

JS:

jQuery(document).ready(function() {
   jQuery(".tm-block-padding-top-bottom.tm-block-secondary > .uk-container").before( "<div class='togglesearch'><span>Search</span></div>" );
   jQuery(".togglesearch").click(function(){
      jQuery(this).next().slideToggle(500);
   });
});

CSS:

.tm-block-padding-top-bottom.tm-block-secondary > .uk-container {
    display: none;
}
.togglesearch {
    text-align: center;
}
.togglesearch span {
    cursor: pointer;
}

This is for that wide block with a search module that I found on your website. Check other pages too to see if this code didn't break something else.

[Steven Vandermeulen]

This is exactly what I wanted! But for some reason the width for two of the three input fields has shrunk and I can't seem to override the css because it is embedded in the js. Any tips on how I can make them wider again?

[Steven Vandermeulen]

And it seems that there is a div at the bottom of each page there is a second div with the name 'tm-block-padding-top-bottom tm-block-secondary'

So the seach span also appears down there but without the search module in it. Maybe it is possible to adapt de name of the bottom div?

[Kess]

I didn't notice that there is a div with the same class at the bottom. But, thankfully, the first one can be specified using additional classes which the second one doesn't have.

Did the width of those inputs changed after adding that code? If so, let's try to make it a bit different.

 

Here is an updated code:

jQuery(document).ready(function() {
    jQuery(".tm-wrapper .tm-block.tm-block-padding-top-bottom.tm-block-secondary > .uk-container").before( "<div class='togglesearch'><span>Search</span></div>" );
    jQuery(".togglesearch").next().hide();
    jQuery(".togglesearch").click(function(){
        jQuery(this).next().slideToggle(500);
    });
});

and CSS is changed too (removed "display: none" which could have caused shrinking) :

.togglesearch {
    text-align: center;
}
.togglesearch span {
    cursor: pointer;
}

If this fails to fix the width, you can overwrite any inline styles created by JS using !important in your CSS rules.

[Steven Vandermeulen]

I had to use the !important hack, but now it's working super! 

thanks!