Home Forums Porto Template Opening accordion in faq one by one

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10031369
    leonardo_f
    Participant

    Hello! Using faq https://preview.oklerthemes.com/porto/7.3.0/page-faq.html, how would this be modified so that only one is open at a time, i.e. clicking on a closed one to open it also closes the currently open one? And how to remove the preview of the answer to the question? Thanks



    Template Version: 7.6
    #10031378
    Support2
    Keymaster

    Hello, thanks for your purchase.

    On this case we recommend for you use an “Accordion” instead of “FAQ Toggles”.

    For example here’s the code of accordion with primary color on this page: https://preview.oklerthemes.com/porto/7.6.0/elements-accordions.html

    <div class="accordion accordion-primary" id="accordion2Primary">
    	<div class="card card-default">
    		<div class="card-header">
    			<h4 class="card-title m-0">
    				<a class="accordion-toggle" data-toggle="collapse" href="#collapse2PrimaryOne">
    					Accordion Title 1
    				</a>
    			</h4>
    		</div>
    		<div id="collapse2PrimaryOne" class="collapse show" data-parent="#accordion2Primary">
    			<div class="card-body">
    				<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    			</div>
    		</div>
    	</div>
    	<div class="card card-default">
    		<div class="card-header">
    			<h4 class="card-title m-0">
    				<a class="accordion-toggle" data-toggle="collapse" href="#collapse2PrimaryTwo">
    					Accordion Title 2
    				</a>
    			</h4>
    		</div>
    		<div id="collapse2PrimaryTwo" class="collapse" data-parent="#accordion2Primary">
    			<div class="card-body">
    				<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    			</div>
    		</div>
    	</div>
    	<div class="card card-default">
    		<div class="card-header">
    			<h4 class="card-title m-0">
    				<a class="accordion-toggle" data-toggle="collapse" href="#collapse2PrimaryThree">
    					Accordion Title 3
    				</a>
    			</h4>
    		</div>
    		<div id="collapse2PrimaryThree" class="collapse" data-parent="#accordion2Primary">
    			<div class="card-body">
    				<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    			</div>
    		</div>
    	</div>
    </div>

    * OBS: Actually we have a issue on the accordions page, that’s working as toggle (don’t open one at time). We will fix this for the next version of Porto. So when copy the accordion code, you need just change the position of data-parent="xxxxx" attribute like in the example code above to get the accordion effect working (open one at a time).

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031384
    leonardo_f
    Participant

    Thanks for the answer. Yes, I already saw your answer in another topic at the expense of the accordion. I was just interested in the faq design with color change on click and with arrow on the right


    #10031391
    Support2
    Keymaster

    Hello,

    With some custom code you have a very similar effect. Please follow the steps below:

    1) HTML:

    <div class="accordion accordion-primary custom-accordion-style" id="accordion2Primary">
    		<div class="card card-default">
    			<div class="card-header">
    				<h4 class="card-title m-0">
    					<a class="accordion-toggle d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapse2PrimaryOne">
    						Accordion Title 1
    						<i class="fas fa-angle-down"></i>
    					</a>
    				</h4>
    			</div>
    			<div id="collapse2PrimaryOne" class="collapse show" data-parent="#accordion2Primary">
    				<div class="card-body">
    					<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    				</div>
    			</div>
    		</div>
    		<div class="card card-default">
    			<div class="card-header">
    				<h4 class="card-title m-0">
    					<a class="accordion-toggle collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapse2PrimaryTwo">
    						Accordion Title 2
    						<i class="fas fa-angle-down"></i>
    					</a>
    				</h4>
    			</div>
    			<div id="collapse2PrimaryTwo" class="collapse" data-parent="#accordion2Primary">
    				<div class="card-body">
    					<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    				</div>
    			</div>
    		</div>
    		<div class="card card-default">
    			<div class="card-header">
    				<h4 class="card-title m-0">
    					<a class="accordion-toggle collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapse2PrimaryThree">
    						Accordion Title 3
    						<i class="fas fa-angle-down"></i>
    					</a>
    				</h4>
    			</div>
    			<div id="collapse2PrimaryThree" class="collapse" data-parent="#accordion2Primary">
    				<div class="card-body">
    					<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    2) Add in (css/custom.css):

    .custom-accordion-style .accordion-toggle.collapsed {
    	background-color: #f7f7f7 !important;
    	color: #0088CC !important;
    }
    
    .custom-accordion-style .accordion-toggle > i {
    	transform-origin: center !important;
    	transition: ease transform 300ms;
    }
    
    .custom-accordion-style .accordion-toggle.collapsed > i {
    	transform: rotate(-180deg);
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031428
    leonardo_f
    Participant

    Thank you, everything is fine, but, when you click on the background, the title turns blue, when you click on the next, it also turns blue, and so everything takes turns.
    As a result, visually there is no active tab. I would like them to be gray and only the active tab will turn blue, then when you click on another, it will turn blue and the previous one will be gray again. That is, so that only the active on is highlighted.


    #10031433
    Support2
    Keymaster

    Hello,

    We did a new test with our previous solution code for you and couldn’t reproduce the mentioned issue.

    Can you please send a online test link with your website for us ? So we can insect your code and discover why it’s happening at your end.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)