Sumit patel Sumit patel - 2 months ago 6
CSS Question

how to expandable my Div in Page load?

i tried all question related my questions but not solve my questions. i click then open expandable that worked fine. i open expandable Div in page load.

I want to by default page load open in my all expandable div.

Fiddle Demo Here

Snippet Example Below



$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});

.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>




Answer

Update your style to:

.expandable {
    display:block;
}

Now at page load all div are expanded default