NoNickIdeas NoNickIdeas - 6 months ago 15
HTML Question

Responsive accordion with data on the right

I need to make a project listing people (name, and details) with 2 versions (or 1, which need to be responsive (big screen, mobile)). Always same ways, click on the name, it will show an accordion with details inside.

I'm not good here.
I Started with mobile part, then go to destop one. details, on mobile, need to be under the name (possibly between 2 names) and one desktop, on the left.

Here a fiddle of what I did so far. But as you easily see, on desktop screen, details mode just break things, since left list go under.

https://jsfiddle.net/4h54hm2y/



function contentToggle()
{
$('#accordion').find('.accordion-toggle').click(function(){

//Expand or collapse this panel
$(this).next().slideToggle('fast');

//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});
}

// when document loaded
$(document).ready(function(){

// load toggle event
contentToggle();

});

body {
font-family: "Times New Roman", Georgia, Serif;
}

.container h1 {
text-align: center;
}

.img-container {
float: left;
box-shadow: 1px 1px 12px #555;
height: 100px;
width: 100px;
margin: 0 10 10 0;
padding: 2px;
}

.profil-title {
background-color: #CCC;
height: 20px;
padding: 3px;
border: 1px solid gray;
}

.profil-picture {
width: 100%;
height: 100%;
}

.profil-link {
color: black;
margin: 5px;
}

.profil-details {
display: none;
}

.name-container p{
font-weight: bold;
}

@media screen and (min-width: 600px) {
.profil-container {
margin-left: 75px;
}

.profil-title {
width: 150px;
display: inline-block;
}
.profil-details {
display: none;
margin-left: 180px;
margin-top: -28px;
}
.list-last {
border-bottom-left-radius:10px;
}
.list-first {
border-top-left-radius:10px;
}

.name-container {
width: 100px;
display: inline-block;
}
.name-container p {
font-weight: bold;
margin: 0 0 5 0;
}
.img-container {
float: left;
box-shadow: 1px 1px 12px #555;
height: 100px;
width: 100px;
margin: 0 10 5 0;
padding: 2px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container" id="accordion">
<h1>Profil browser</h1>

<div class="profil-container">
<div class="profil-title accordion-toggle list-first">
<a class="profil-link" href="#">name</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>


<div class="profil-container">
<div class="profil-title accordion-toggle">
<a class="profil-link" href="#">name 2</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn 2</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>

<div class="profil-container">
<div class="profil-title accordion-toggle list-last">
<a class="profil-link" href="#">name 3</a>
</div>
<div class="profil-details accordion-content">
<div class="name-container">
<p>personn 3</p>
</div>
<div class="img-container">
<img src="http://placehold.it/350x150" class="profil-picture">
</div>
<div class="profil-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat ut nisi non consequat. Nulla consequat mauris id ullamcorper iaculis. Curabitur dapibus enim libero, vel tristique nisl eleifend quis. Donec egestas sem a lacinia facilisis. Etiam quis velit id lorem ornare finibus ac non leo. Donec ultricies consectetur libero, vel ultrices metus porta quis. Donec sagittis lectus enim, non elementum lacus vestibulum sed. Ut semper odio non varius vehicula. Cras vitae semper ligula. Fusce mi arcu, congue quis metus nec, euismod gravida erat.
<br/><br/>
Donec interdum diam ac ipsum facilisis, sed scelerisque turpis pulvinar. In justo dolor, lobortis et ultrices non, scelerisque quis velit. Cras erat mauris, blandit eget nisi id, ornare auctor nunc. In suscipit magna efficitur venenatis tempus. Suspendisse potenti. Nulla sit amet pulvinar est, non interdum nisl. In id rutrum est. Morbi viverra, nisi sit amet congue eleifend, ante lectus pulvinar nunc, id facilisis tortor eros id lacus. Praesent pretium venenatis fringilla. Suspendisse hendrerit laoreet lobortis. Ut feugiat, lorem id laoreet volutpat, leo magna iaculis urna, a imperdiet odio eros in ex.
<br/><br/>
Integer pretium orci vitae sapien blandit, a mollis dolor viverra. Nam dapibus, orci in viverra bibendum, dolor ex eleifend nisi, a condimentum dui tortor nec purus. In eleifend pellentesque bibendum. Fusce ut lacus eget velit auctor sagittis sit amet sit amet metus. Ut ultrices ac nibh in venenatis. Praesent finibus tellus ut viverra viverra. Praesent sodales velit sed tellus bibendum scelerisque.
</div>
</div>
</div>

</div>
</body>





Also, on big screen, i'm trying to get a kind of border, like that.

I thought about include things in php, or use JQuery to create a html part, but it seems over-reacted, and I think it may be done in CSS. Fact is, I'm not good, and just asking here some help or advice abot that.

Final goal would be to do something like that.
finalview

Answer

Into you @media definition, add

@media screen and (min-width: 600px)  {

  .accordion-content {
    border: 2px solid black;
    position: absolute; left: 60px;
  }

  ...

JSfiddle: https://jsfiddle.net/uf12wozx/

Edit: to better control the details you need to wrap the content part (below the h1) into another div and set that div as your position: relativ base.

Then you can better position each detail view divs with a position: absolute; top: 0;.

See this plunker: https://jsfiddle.net/wLb1Lmg1/

Comments