HTML, CSS file that is associated with a .js file issues

Wappler General Need Help
1

I am sure there is a very, very simple solution for this. I have an DIV accordion that has an associated .css and .js file needed.

How do I attached the .js file the associated div?

2

If you did not use the Bootstrap accordion, you will need to add the JS file in code view.

3

I am attempting to create an horizontal accordion. please see the attached link

the code shows an associated JS

4

Assuming that to have already created the JS file and called it similar to horizontal-accordion.js, then after <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script> at the bottom of the page add

<script src="/[path-to-js]/horizontal-accordion.js"></script>
5

yes I created the file placed it in public/src/js/horizontalEffect.js

One other question Ben, and again thank you as always for you help. I have having issues when connecting additional CSS files.

For example, I have an about Us page, and on that page it automatically associates the main style.css file. I however would like it to connect and use a new CSS file associated with that page. I have gone under styles on the top right and attached an existing .css file. However it does not associate the css file continues to write new CSS to the main style.css file. Is there something in addition that I should be done?

6

So one other issue, This will be on my about us page. the only location I see that the bootstrap script is located on is the main.ejs page. I placed it under that and it did nothing. So I assume I need to add this to the bottom of the about us page. correct?

7

I could be wrong but I believe the initial style link is meant to be able to connect the design panel to a style sheet for example style.css if you linked two here it would then write new styles in two places if you need some additional css to be included you most likely want to create a link to it by adding in code view with something like:

<link rel="stylesheet" href="../../css/style.css">

Again I could be wrong but this was my understanding of how the panel worked

8

Thanks @Sorry_Duh…

I add the link to each page and see what happens.

does it need to be added to each sheet? or just main.ejs?

9

In the head tags of main.ejs will give the styles to any content pages that use main.ejs as a layout, also preference but you can also just copy and paste the css into style.css instead of a new file depends how you want to organise things most of mine are in style.css

10

Yah I have been just adding to the main style.css. It has just been becoming overcrowded. LOL…

Any suggestion on the above linking of the .js file? I have place the <script scr=> in the main.ejs file, in the about page. just no change at all.

11

Have you tried loading it in a web browser what might be happening is because the script is in main.ejs and you are working on a content page the scripts etc aren’t rendered in the content page as its only loading the app connect components requested.

In the browser the main and content page will be rendered as one therefore the script and html is in one place maybe Ben knows more about this I haven’t messed around with too many custom scripts

12

Yah I have… I think I am missing something simple. That is my problem, I find a tool that can help quicken delivery and then I push the limits. Just my MO.

thanks for the help my friend. Hopefully @ben can help

13
  1. Place the style rules in style.css

image
image1525×879 67.4 KB

  1. Create a new folder with a new JS file and place the code in the new file

image
image1525×879 50.3 KB

  1. In the layout page, add <script src="/js/horizontalEffect.js"></script>

image
image1525×879 75.6 KB

  1. Add the HTML to the content page

image
image1525×879 80.1 KB

  1. Open in the browser and see the result

image
image1527×883 30 KB

14

Ben, thank you so much that worked!

One last question and I really thank you for your help. I would like to have once card stay open upon load of the page. right now the cards are not open when the browser is actived. What needs to be added to the script to allow for that to happen?

15

From looking at the script it looks like what you could do is change the unset class on each card to either

small or expand

expand for the one you initially want open small will shrink the others not tested this though.

e.g:

<div class="card choice expand bg-secondary text-dark mx-2">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">Button</button>
    </div>
  </div>
16

As @Sorry_Duh has mentioned:

Change - unset

    <div class="card choice unset bg-primary text-white mx-2">

to - expand

    <div class="card choice expand bg-primary text-white mx-2">
1 Like
17

thank you very much.

I am working on customization right now. Ill drop an image of what the final look is when I am done. Thanks to you both for your help.

2 Likes