Issue in Laravel5.8: Unable to collapse the HTML code retrieved from the database

How can I display HTML code from the database without affecting the functionality of the Collapse feature? The Collapse feature works fine when I don't decode the HTML, but it stops working when I decode it. Why is this happening?

 <!-- START TAB 1 -->
                                @foreach($faqCategories as $count =>$faqCategory)
                                    <div @if ($count == 0)class="tab-pane active"@else class="tab-pane" @endif  id="tab_{{$faqCategory->id}}">



                                        <div class="panel-group" id="accordion{{$faqCategory->id}}">
                                            @php
                                                $sl = 1;
                                            @endphp
                                            @foreach($faqsubcat as $fade => $faqsub)
                                                @if( $faqCategory->id == $faqsub->faq_category_id)
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading">
                                                            <h4 class="panel-title">
                                                                <a href="#accordion{{$faqCategory->id}}_{{$faqsub->id}}" data-parent="#accordion{{$faqCategory->id}}" data-toggle="collapse" class="accordion-toggle">
                                                                   <b> {{ $sl++ }}. {{$faqsub->title}}</b>
                                                                </a>
                                                            </h4>
                                                        </div>
                                                        <div @if ($fade == 0)class="panel-collapse collapse in"@else class="panel-collapse collapse" @endif id="accordion{{$faqCategory->id}}_{{$faqsub->id}}">
                                                            <div class="panel-body">
                                                              {!! $faqsub->description !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>

                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer №1

Try using data-target instead of href

For instance (Not tested)-

<a data-target="#accordion{{$faqCategory->id}}_{{$faqsub->id}}" data-parent="#accordion{{$faqCategory->id}}" data-toggle="collapse" class="accordion-toggle">
     <b> {{ $sl++ }}. {{$faqsub->title}}</b>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with an onClick function not working on a .php webpage?

I recently developed a simple JavaScript script that dynamically loads an image based on user input in a text field (e.g., entering 'brick1' loads brick1.jpg). Although this works fine on a regular HTML page, I faced issues triggering the onClick ...

Internet Explorer 9 is not fully extending the width of the box for multiple select options

I am facing an issue with a multiple select input in Internet Explorer 9. The options are not utilizing the full width of the select box, despite having a min-width set on the select element. In Chrome and Firefox, the items fill up the available width pe ...

Updating a component property value through the template

Consider the code snippet below: import { Component, OnInit,Input } from '@angular/core'; @Component({ selector: 'topic-details', templateUrl: './detailpane.component.html', styleUrls: ['./detailpane.component.scs ...

Apply CSS3 attributes in real time

The for loop I have is functioning properly: <div id="page1div"></div> <script> list = " "; for (var i = 0 ; i < length ; i++) { list = "<h1 class='entriesdisplayed'>" + item(i) + ...

Acquire the content of a nested element using jQuery

I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item. CodePen Example Currently, my code displays all text. I only want to display the ...

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

Guide on storing images in a designated folder using CodeIgniter

My code is located in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">upload foto</label> <inpu ...

Perform CSS transitions simultaneously

Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far. The issue I'm facing is with the CSS tran ...

Incorporating CSS into React.js applications

I am currently working on a project using MERN.io. In my project, I am utilizing the React.js component Dropdown. However, the Dropdown component does not come with its own style and CSS, resulting in no styling at all. ... import Dropdown from 'rea ...

Once the input is disabled, what is the best way to delete the previously inserted text?

Here's the scenario: I have two options that display different questions each. If a user decides to switch their option at the last minute, any inputs within option 1 will hide and show option 2. However, all input texts need to be removed and disabl ...

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

Utilizing HTML5 to import content from text files

Currently, I am experiencing an issue with HTML 5. I am struggling to find a way to load data into a web page statically from locally saved files. So far, my only successful method has been using < input type="file" id="fileinput" / >, but I am inter ...

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

I've been scouring the internet for a jQuery plugin that allows me to zoom in on an image. There are many options out there, but I prefer ones that display the zoomed-in image in a separate area rather than directly on the original image. For example ...

Generate visual content from written text with the use of a form and store it on the

Struggling to implement a php function on my webpage that generates an image from text input. However, nothing appears to be happening when I execute the code: PHP - $to = $paths. '/card.png'; if (isset($_POST['make_pic'])) { $text = ...

Discover the index of the selected table row using Bootstrap 4 Framework

I am struggling with a Bootstrap 4 table that is filled with JSON data. My goal is to determine the index of the row when a user clicks on it. I have tried various examples without success. Can anyone assist me in finding the selected row? When I execute ...

Updating an HTML input field property with JavaScript is not reflecting the changes

I am currently working on a form with two fields: stationery type and stationery request quantity. The stationery request quantity field only accepts numerical input. The minimum quantity that can be entered in this field depends on the value selected in t ...

What could be causing this issue with my JavaScript code?

Here is the code I have: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <script type="module"> import * a ...

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

I am attempting to embed a PDF document in an HTML view, with the assistance of a Knockout ViewModel that supplies the URL for the document. I understand that the appropriate HTML element for this task is <object>, so my view looks like this: <di ...

Instructions on adding a solid border color to a circular div using CSS

Hey there! I'm curious, is it possible to style a straight border color on a rounded div using CSS? Here I have some basic Tailwind CSS code. <div class="rounded-2xl w-72 h-20 border-l-4 border-l-yellow-500"> ... </div> In the ...

Track user sessions and transfer username to final page

Is there a way to showcase the chosen username from a dropdown menu on the initial page and then also display it on the last page without having to pass variables between pages? Additionally, if I wish to incorporate a timer on a middle page, how can I sto ...