CODEWITHSUNDEEP
jquerycssjquery-uiaccordion
Johnston
Johnston

Reputation: 20894

JQuery ui accordion combine content in header?

How do I use the jQuery accordion and have a background image in the content that flows into the header? I've been able to make the header transparent but I can't seem to combine them. I don't know if it's possible because the are separate h3 and divs.

<style type="text/css">
html,body{
height: 100%;
}
.ui-accordion-content{
background:url('{{ url_for('static',filename='img/building_img/4/bg4_black.jpg') }}');
background-size: cover;
background-repeat: no-repeat;
}
</style>


<div id="accordion2">
  <h3>building.name</h3>
  <div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>

<script>
$(function(){
$( "#accordion2" ).accordion({
heightStyle: "fill"

});
$(window).resize(function(){
    // update accordion height
    $( "#accordion2" ).accordion( "refresh" )
});
})
</script>

Upvotes: 0

Views: 448

Answers (1)

apaul
apaul

Reputation: 16180

I just played with the CSS a little, and got the effect you were after:

Working Example

html, body {
    height: 100%;
}
.ui-accordion .ui-accordion-content {
    background: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png'); 
    background-repeat: repeat; /* changed the background for demo purposes only*/
    position:relative;
    top:-40px;
    z-index:1; /* used position and z-index to get the header to overlap the content */
    padding-top:20px; /* keep the text below the header */
}
#accordion2 h3{
    background:#fff url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
    background-repeat: repeat; /* use the same background img for the header and content, but be sure to add a color to the header */
    position:relative;
    z-index:2; /* used position and z-index to get the header to overlap the content */
}

Upvotes: 1

Related Questions