Technical Documentation feedback and issue

Code Feedback
1

Would love some feedback on this…

https://codepen.io/safiyc/pen/BEXRpX

…also, anyone up for this challenge: in mobile view, the sections are collapsed, when clicking on a section, it expands, then immediately collapses. I don’t want this to happen. This happens in the codepen env but not when I open the project locally from visual studio code. Anyone has an idea why?

2

So… I think i know what your problem is. Code pen has Auto-Updating Preview so your toggling the collapse then instantly re toggling it. So what I gather from the bootstrap doc is all you need is

data-toggle="collapse" href="#collapseExample"

the href being the target so in your case

<a href="#Introduction" class="nav-link" data-toggle="collapse" href="collapseIntro">Introduction</a>

and remove all your javascript.
the introduction part works in this fork
https://codepen.io/bmansk14/pen/yWbazp?editors=1010

3

@bmansk8 - I see what you did. So, I have mine set up a little different from the bootstrap example. The anchors in your example only appear and in-use during desktop layout. they don’t have anything to do with collapsing sections. So, what I have going to toggle collapse in mobile layout…

<section id="Introduction"> <!-- nav-link anchor targets this -->
   <header>Introduction</header> <!-- in mobile, clicking this will collapse #introCollapse -->
   <div id="introCollapse">blahblahblah</div>
</section>

JavaScript is needed to get this code block to work. Would love to hear what other solution you and others can think of.

4

oh i see what u mean… ya you can toggle that using jquery to be off in desktop use then on in mobile or if u want a accordion layout this bootstrap doc also has a example for that as well.

$('#myCollapsible').collapse({
  toggle: false
})

so something like that with a second nav bar that only renders when told to.

.collapse('dispose')

also gets rid of whatever elements are collapsible.
the events section of the doc goes into more detail on that stuff.

5

Hey thank you for the help. I played with it a bit, but I think I will just link to the project’s gh-pages if I plan to include it in my portfolio. Thanks!