Scribd
Upload
13 views2 pages

CSS and jQuery Toggle Functionality

The document contains HTML and CSS code for a user interface component that includes a toggle feature for showing and hiding content. It utilizes jQuery to handle click events on toggler elements, which control the visibility of associated panels. The styling specifies layout and appearance details, such as letter spacing and margins for the text elements.

Uploaded by

tamazi.aj
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views2 pages

CSS and jQuery Toggle Functionality

The document contains HTML and CSS code for a user interface component that includes a toggle feature for showing and hiding content. It utilizes jQuery to handle click events on toggler elements, which control the visibility of associated panels. The styling specifies layout and appearance details, such as letter spacing and margins for the text elements.

Uploaded by

tamazi.aj
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

letter-spacing: -2px; - ასოების დაშორება

აშორებს ჩარჩოს მაუსის დაჭერა არგაშვებისას

.btn-primary:focus:not(:focus-visible) {
outline: none;
}

metis naxva +

<div class="mainwrap">

<div class="rgthdng play">

<div class="showpanel">
<p class="animated bounceIn">
<div class="panel-group" id="accordion">

aq sasurveli teqsti

</div>

</p>
</div>

<div class="toggleHolder">
<span class="toggler"><span><i class="fa fa-plus" style="font-size:
12px;"></i></span> <h4>{{ heading_module }}</h4></span>
<span class="toggler" style="display:none;"><span><i class="fa fa-minus"
style="font-size: 12px;"></i></span> <h4>{{ heading_module }}</h4></span>
</div>
</div>
</div>

<Style
/* more & show less */
.rgthdng:first-child{
margin-top: 10px;
margin-bottom: 10px;
}
.rgthdng{
h4{
margin-top: 0px;
margin-bottom: 2px;
text-transform: uppercase;
margin-left: 7px;
color: #2a1f3f;
font-size: 14px;
font-weight: 400;
font-style: normal;
font-stretch: normal;
line-height: 1.3;
letter-spacing: .3px;
}
}
.showpanel{
display: none;
}
.toggler{
cursor: pointer;
display: flex;
}
/* more & show less end */
</style>

<script>
jQuery(document).ready(function($) {
$('.toggler').on('click',function(){
$(this).parent().children().toggle(); //swaps the display:none between the
two spans
$(this).parent().parent().find('.showpanel').slideToggle(); //swap the
display of the main content with slide action
});

});
</script>

You might also like