I am working on a project that will requires me to search the content of an accordion list on an html page but don’t know how to go about it. please help.
My html looks like this.
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h2>CSS + HTML only Accordion Element</h2>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h3>Languages Used</h3>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h3>How it Works</h3>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h3>Points of Interest</h3>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
</ion-content>
how do i implement a search bar.
hey @rafadeaderinwale , i don’t know if i get you right, but i think this link will help:
So with that you will just have to look for match between the search bar input and the content of accordion. i suppose accordion content will be available in the controller so you can perform that search and do what you need to do according to the result.
If that doest help, then please tell me more about the functionality.
Thanks
1 Like
Thanks so much for the reply.
i have tried adding the ion-search bar but i dont know how to make it search content of my html. i dont want to put my data in the home.ts that will mean that i will have to use an ngfor which i dont want.
I don’t know why you said you will need and ngFor, could just create an object that will have each accordion data.
Thanks so much. i have seen this file before. my problem was that this seem to be a javascript code and it does not seem to work when i place it in my .ts file. what am i doing wrong
Hi @addwebsolution
If you work on ionic v2 or v3, so check it
Hope this will solve your issue in searching
thanks
1 Like
I really appreciate your inputs. putting all together i have discovered that my main problem was thinking that i will not be able to do all the html editing i want to do if i place my data in the controller.
I am now doing that and will let you know when i am tru. thanks so much.
1 Like
I have been able to complete the project. Thanks to you all.
However the load time is toooooooo much. about 15sec for a release version is a no for me. Any idea on how to increase the load time.
just use --prod when you build
i did. I used it alone, them with the --release flag, when it did not work I signed it. i am so confused
please show me the command you typed
I did
ionic cordova build android --prod
ionic cordova build android --prod --release
cordova build android --prod
cordova build android --prod --release
I have used each of this.
try this: ionic cordova run android --release --prod
sorry put prod before release:
ionic cordova run android --prod --release
I have done that before and it is still not loading fast and it displays a white screen after the splash screen.
Ok, what i will do in this case will be:
Delete my node_modules and platform.
Then after do this:
-ionic cordova build android --prod --release
Sometimes it helps