FAQ-Accordian Card

Community feedback

• 

  Yokke•620

  @JexintePosted over 2 years ago

  Hello ,

  Above all organize your files in separate folder it's more meaningful when we need to find something specific ( When I download your code I had to rewrite almost all img files path )

  There is a more simple way to do what is ask on the challenge by using <details> and <summary> tag that have the effect that you need to toggle a question and her answer without js ! ( Javascript is not a requirement to use I learn that by asking on the website slack)

  More informations here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

  Then on css you can specify what to do when a question is open by targeting the "open" attribute more details to here :

  https://css-tricks.com/put-a-background-on-open-details-elements/

  I'm just saying that but I think that If you are stuck on your code try to not check the code of others now just say where you're stuck and I think you'll get a better understanding and better answer on why it's not working ( This is how some people learned me ) .

  I forgot in your js code you're trying to show all answer with the [i] index but you haven't loop through them so they are gonna be always undefined ! You could know that just by using a console.log(ans[i]) !

  In hope it helps !

  Marked as helpful

  0

  ---

  

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  @Jexinte hey, thanks for the feedback I didnt know about <details> earlier, so im gonna try out what u said :)

  0

  

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  @Jexinte hey, thanks for the feedback I didnt know about <details> earlier, so im gonna try out what u said :)

  0
• 

  P

  subu•390

  @subu-vPosted over 2 years ago

  Regarding images, Use this property on the bigger image.

  transform:translateX(-values); 
  This will move the image on the left, tinker with the value untill you archeive the desired output.
  
  

  As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;

  position:absolute;
  top: some value;
  left: some value;
  transform:translate(-50%,-50%);
   //tinker with the values untill the desired outcome.
  

  To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.

  z-index:-1;
  
  

  As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git

  If you have any doubts, feel free to ask.

  Marked as helpful

  0

  ---

  

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  @subu-v thank you so much, ill try this! i just have a doubt regarding your javascript fill. like i saw you only toggled the questions class and your answers are in acc_collapse class. But still your code is working fine. Could you explain how this is happening?

  0

  

  P

  subu•390

  @subu-vPosted over 2 years ago

  @VANIMEHTA

  I am just using three classes for the functionality.

  -.accordian__question.open

  -.accordian__collapse.open

  -.acordian__collapse.collapse

  1. By default, we don't want answers to shown on the User-interface right?

  So i added the .collapse class on the .accordian__collapse html element. You can see this in my html file. Now all the answers will not be displayed in the UI(browser), cause** .collapse** class has the property display:none.

  .accordian__collapse.collapse {
    display: none;
  }
  
  

  2. Now i have two .open classes each for the .accordian__question and .accordian__collapse

  Usually when you want something to be visible on the browser(UI), you set display: block/inline-block/inline etc.. This is what my .accordian__collapse.open class for the have.

  
  .accordian__collapse.open {
    display: block;
  }
  
  

  As you saw my javascript file.

  3. When i toggled my .accordian__question class, the reason .accordian__collapse is working because of the method i used which is nextElementSibling What it does that, it will select the next sibling element in regard to the current element.

  You can see in my html file. .accordian__collapse comes right after the .accordian__question

  I hope i'm not confusing, if so, please free to ask.

  Marked as helpful

  0

  

  Vani•160

  @VANIMEHTAPosted over 2 years ago

  @subu-v ohh I see ,got it! thankss

  0