In a page I want to show a div only when two conditions are met.
So I used a data-binding-show if one condition is true
and data-binding-hide if the OTHER condition is false.

If only one of the conditions is met, then also hide the div.
But I can't get it working. It will always show the div.

The code:

<div  data-binding-hide="{{fp_image}}" data-binding-show="{{c_blogimage}}"  class="columns"  ><div class=" actueel_img_container" style="background-image:url({{c_blogimage}})" >blogimage</div></div>

Is it impossible? If so, then I wil have to go back to use my php code again

Can you please explain the exact conditions when the div must be displayed?

There is a blog article.
It can have a blog image attached. (c_blogimage)
It can have a article image attached (fp_image)
or
It can have no image attached.

There a two columns. Left for image and right for text.
In the left column there are TWO divs. One div to show fp_image.The other one for the blogimage.
If fp_image is attached then only show the fp_image div. (even when there is a blog_image also attached).
This works great with: data_binding-show="{{fp_image}}"

If no fp_image is attached, but blog_image is attached, then show the blog_image div.
This works with: data-binding-show="{{c_blogimage}}"

But the problem is when the fp_image and blog_image are both attached. In that case the div for the blog_image must hide, even though the blog_image is present.

And if no fp_image and blog_image are attached, then don't show either divs, the column will not expand and the text will use the full width.

Hope you understand the situation!

You can try using this condition for the blog_image div:

data-binding-show="{{c_blogimage && fp_image == ''}}"

This will show the blog_image only when there is a record for {{c_blogimage}} and only when {{fp_image}} is empty.

Great! That worked!
Thank you.